Graphics layer above WebMap's portlItem order

[julian_svcs]

In my custom map application, I would like to use a portalItem in the WebMap and show a graphics layer (for sketch widget) above this portalItem. I want to use the WebMap portalItem as I have specific graphs and custom text in the popups.

I tried changing the order of adding the portalItem and graphic layer but it does not change this in the Layer List.

const webmap = new WebMap({
});
webmap.portalItem = {
    id: "f2e9b762544945f390ca4ac3671cfa72"
};
webmap.layers.add(graphicsLayer);

or

const webmap = new WebMap({
});
webmap.layers.add(graphicsLayer);
webmap.portalItem = {
    id: "f2e9b762544945f390ca4ac3671cfa72"
};

still shows

As it is now, when I draw a graphic using the Sketch widget, the features from the portalItem overlays the drawn graphic.

Is there a way to have the graphics layer above the web map (portalItem)?

Sample code is here.

[julian_svcs · Accepted solution]

I managed to sort this out. I added the webmap.layers.add(graphicsLayer); into a view.when() to load only after the webmap's portalItem is loaded.

const graphicsLayer = new GraphicsLayer({
    title: "Sketch Layer"
});
const webmap = new WebMap({
});
webmap.portalItem = {
    // autocasts as new PortalItem()
    id: "f2e9b762544945f390ca4ac3671cfa72"
};
const view = new MapView({
  map: webmap,
  container: "viewDiv"
});
view.when(() => {
  webmap.layers.add(graphicsLayer);
});