diff --git a/packages/scenes-app/src/components/Routes/Routes.tsx b/packages/scenes-app/src/components/Routes/Routes.tsx
index fec7205d3..b9daebafb 100644
--- a/packages/scenes-app/src/components/Routes/Routes.tsx
+++ b/packages/scenes-app/src/components/Routes/Routes.tsx
@@ -1,12 +1,20 @@
 import * as React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { ROUTES } from '../../constants';
 import { DemoListPage } from '../../pages/DemoListPage';
 import GrafanaMonitoringApp from '../../monitoring-app/GrafanaMonitoringApp';
 import { ReactDemoPage } from '../../react-demo/Home';
 import { HomePage } from '../../home-demo/HomeApp';
+import { SceneObjectBase } from '@grafana/scenes';
 
 export function AppRoutes() {
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+
+  if (params.get('renderBeforeActivation') === 'true') {
+    SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true;
+  }
+
   return (
     <Routes>
       <Route path={`${ROUTES.Demos}/*`} Component={DemoListPage} />
diff --git a/packages/scenes-app/src/demos/flickeringDemo.tsx b/packages/scenes-app/src/demos/flickeringDemo.tsx
new file mode 100644
index 000000000..a53fd9f11
--- /dev/null
+++ b/packages/scenes-app/src/demos/flickeringDemo.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import {
+  EmbeddedScene,
+  PanelBuilders,
+  SceneAppPage,
+  SceneAppPageState,
+  SceneCSSGridLayout,
+  SceneFlexItem,
+  SceneFlexLayout,
+  SceneObjectBase,
+  SceneRefreshPicker,
+  SceneTimePicker,
+  SceneTimeRange,
+  SceneVariableSet,
+  VariableValueSelectors,
+} from '@grafana/scenes';
+import { getQueryRunnerWithRandomWalkQuery } from './utils';
+import { Button, InlineSwitch } from '@grafana/ui';
+import { useLocation } from 'react-router-dom';
+import { locationUtil } from '@grafana/data';
+
+export function getFlickeringDemo(defaults: SceneAppPageState) {
+  const layout = new SceneCSSGridLayout({
+    autoRows: 'auto',
+    children: [],
+    isLazy: true,
+  });
+
+  layout.setState({
+    children: [
+      PanelBuilders.timeseries()
+        .setTitle('Panel with explore button')
+        .setData(getQueryRunnerWithRandomWalkQuery())
+        .setHeaderActions(<SwitchPanelButton layout={layout} />)
+        .build(),
+      PanelBuilders.timeseries().setTitle('Panel below').setData(getQueryRunnerWithRandomWalkQuery()).build(),
+    ],
+  });
+
+  return new SceneAppPage({
+    ...defaults,
+    $timeRange: new SceneTimeRange(),
+    controls: [new RenderBeforeActivationSwitch({}), new SceneTimePicker({}), new SceneRefreshPicker({})],
+    tabs: [
+      new SceneAppPage({
+        title: 'Overview',
+        url: `${defaults.url}/overview`,
+        routePath: 'overview',
+        getScene: () => {
+          return new EmbeddedScene({
+            controls: [new VariableValueSelectors({})],
+            $variables: new SceneVariableSet({
+              variables: [],
+            }),
+            body: layout,
+          });
+        },
+      }),
+      new SceneAppPage({
+        title: 'Details',
+        url: `${defaults.url}/details`,
+        routePath: 'details',
+        getScene: () => {
+          return new EmbeddedScene({
+            body: new SceneFlexLayout({
+              direction: 'column',
+              children: [
+                new SceneFlexItem({
+                  body: PanelBuilders.timeseries()
+                    .setTitle('Panel with explore button')
+                    .setData(getQueryRunnerWithRandomWalkQuery())
+                    .build(),
+                }),
+              ],
+            }),
+          });
+        },
+      }),
+    ],
+  });
+}
+
+interface VizPanelExploreButtonProps {
+  layout: SceneCSSGridLayout;
+}
+
+let counter = 0;
+
+function getNewPanel(layout: SceneCSSGridLayout) {
+  counter++;
+
+  if (counter % 2 === 0) {
+    return PanelBuilders.timeseries()
+      .setTitle(`Another panel ${counter}`)
+      .setData(getQueryRunnerWithRandomWalkQuery())
+      .setHeaderActions(<SwitchPanelButton layout={layout} />)
+      .build();
+  }
+
+  return PanelBuilders.gauge()
+    .setTitle(`Another panel ${counter}`)
+    .setData(getQueryRunnerWithRandomWalkQuery())
+    .setHeaderActions(<SwitchPanelButton layout={layout} />)
+    .build();
+}
+
+function SwitchPanelButton({ layout }: VizPanelExploreButtonProps) {
+  const onClick = () => {
+    layout.setState({ children: [getNewPanel(layout), ...layout.state.children.slice(1)] });
+  };
+
+  return (
+    <Button size="sm" variant="secondary" onClick={onClick}>
+      Switch
+    </Button>
+  );
+}
+
+export class RenderBeforeActivationSwitch extends SceneObjectBase {
+  public static Component = RenderBeforeActivationSwitchRenderer;
+}
+
+function RenderBeforeActivationSwitchRenderer() {
+  const location = useLocation();
+
+  const onToggle = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const url = locationUtil.getUrlForPartial(location, {
+      renderBeforeActivation: evt.currentTarget.checked ? 'true' : null,
+    });
+    window.location.href = locationUtil.assureBaseUrl(url);
+  };
+
+  return (
+    <InlineSwitch
+      label="Render before activation"
+      showLabel={true}
+      value={SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT}
+      onChange={onToggle}
+    />
+  );
+}
diff --git a/packages/scenes-app/src/demos/index.ts b/packages/scenes-app/src/demos/index.ts
index 2170c9734..bb733298d 100644
--- a/packages/scenes-app/src/demos/index.ts
+++ b/packages/scenes-app/src/demos/index.ts
@@ -43,6 +43,7 @@ import { getSceneGraphEventsDemo } from './sceneGraphEvents';
 import { getSeriesLimitTest } from './seriesLimit';
 import { getScopesDemo } from './scopesDemo';
 import { getVariableWithObjectValuesDemo } from './variableWithObjectValuesDemo';
+import { getFlickeringDemo } from './flickeringDemo';
 
 export interface DemoDescriptor {
   title: string;
@@ -319,5 +320,11 @@ export function getDemos(): DemoDescriptor[] {
       getPage: getVariableWithObjectValuesDemo,
       getSourceCodeModule: () => import('!!raw-loader!../demos/variableWithObjectValuesDemo.tsx'),
     },
+    {
+      title: 'Flickering demo',
+      description: 'Demo showing flickering panels',
+      getPage: getFlickeringDemo,
+      getSourceCodeModule: () => import('!!raw-loader!../demos/flickeringDemo.tsx'),
+    },
   ].sort((a, b) => a.title.localeCompare(b.title));
 }
diff --git a/packages/scenes-app/src/demos/scopesDemo.tsx b/packages/scenes-app/src/demos/scopesDemo.tsx
index 524112fe6..bf1b81050 100644
--- a/packages/scenes-app/src/demos/scopesDemo.tsx
+++ b/packages/scenes-app/src/demos/scopesDemo.tsx
@@ -5,24 +5,28 @@ import {
   SceneAppPageState,
   SceneFlexItem,
   SceneFlexLayout,
+  SceneObjectBase,
   SceneVariableSet,
   ScopesVariable,
+  VariableValueSelectors,
   VizPanel,
 } from '@grafana/scenes';
 import { EmbeddedSceneWithContext } from '@grafana/scenes-react';
 import { getEmbeddedSceneDefaults, getPromQueryInstant } from './utils';
 
+SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true;
+
 export function getScopesDemo(defaults: SceneAppPageState) {
   return new SceneAppPage({
     ...defaults,
-    $variables: new SceneVariableSet({
-      variables: [new ScopesVariable({ enable: true }), new AdHocFiltersVariable({ layout: 'combobox' })],
-    }),
     getScene: () => {
       return new EmbeddedSceneWithContext({
         ...getEmbeddedSceneDefaults(),
-
+        $variables: new SceneVariableSet({
+          variables: [new ScopesVariable({ enable: true }), new AdHocFiltersVariable({ layout: 'combobox' })],
+        }),
         key: 'Prometheus query that uses scopes',
+        controls: [new VariableValueSelectors({})],
         body: new SceneFlexLayout({
           direction: 'column',
           children: [
diff --git a/packages/scenes-react/src/components/RefreshPicker.tsx b/packages/scenes-react/src/components/RefreshPicker.tsx
index fad3f2274..7054a9fbc 100644
--- a/packages/scenes-react/src/components/RefreshPicker.tsx
+++ b/packages/scenes-react/src/components/RefreshPicker.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useId } from 'react';
 import { useSceneContext } from '../hooks/hooks';
 import { SceneRefreshPicker, SceneRefreshPickerState } from '@grafana/scenes';
 import { usePrevious } from 'react-use';
+import { useAddToScene } from '../contexts/SceneContextObject';
 
 export interface Props {
   refresh?: string;
@@ -22,7 +23,7 @@ export function RefreshPicker(props: Props) {
     });
   }
 
-  useEffect(() => scene.addToScene(picker), [picker, scene]);
+  useAddToScene(picker, scene);
 
   // Update options
   useEffect(() => {
diff --git a/packages/scenes-react/src/components/SceneFlexLayout.tsx b/packages/scenes-react/src/components/SceneFlexLayout.tsx
index f78a5b3c6..e9364f4a3 100644
--- a/packages/scenes-react/src/components/SceneFlexLayout.tsx
+++ b/packages/scenes-react/src/components/SceneFlexLayout.tsx
@@ -9,6 +9,7 @@ import {
 import { useSceneContext } from '../hooks/hooks';
 import { SceneFlexItem, type SceneFlexItemProps } from './SceneFlexItem';
 import { SceneFlexLayoutContext } from './SceneFlexLayoutContext';
+import { useAddToScene } from '../contexts/SceneContextObject';
 
 export interface SceneFlexLayoutProps extends SceneFlexItemPlacement {
   children: React.ReactNode;
@@ -43,7 +44,7 @@ export function SceneFlexLayout(props: SceneFlexLayoutProps) {
     });
   }
 
-  useEffect(() => scene.addToScene(layout), [layout, scene]);
+  useAddToScene(layout, scene);
 
   // Keep layout placement props in sync (but do not touch children here).
   useEffect(() => {
diff --git a/packages/scenes-react/src/components/VizPanel.test.tsx b/packages/scenes-react/src/components/VizPanel.test.tsx
index 30b308866..a29ad87fc 100644
--- a/packages/scenes-react/src/components/VizPanel.test.tsx
+++ b/packages/scenes-react/src/components/VizPanel.test.tsx
@@ -59,7 +59,7 @@ describe('VizPanel', () => {
   it('Should render with titleItems', () => {
     const scene = new SceneContextObject();
     const viz = VizConfigBuilders.timeseries().build();
-    const titleItems = <div>Title Item</div>;
+    const titleItems = <div key="title-item">Title Item</div>;
 
     const { rerender, unmount } = render(
       <TestContextProvider value={scene}>
diff --git a/packages/scenes-react/src/components/VizPanel.tsx b/packages/scenes-react/src/components/VizPanel.tsx
index 21abf5462..23d455d89 100644
--- a/packages/scenes-react/src/components/VizPanel.tsx
+++ b/packages/scenes-react/src/components/VizPanel.tsx
@@ -13,6 +13,7 @@ import { getPanelOptionsWithDefaults } from '@grafana/data';
 import { PanelContext } from '@grafana/ui';
 import { writeSceneLog } from '../utils';
 import { useSceneContext } from '../hooks/hooks';
+import { useAddToScene } from '../contexts/SceneContextObject';
 
 export interface VizPanelProps {
   title: string;
@@ -81,7 +82,7 @@ export function VizPanel(props: VizPanelProps) {
     });
   }
 
-  useEffect(() => scene.addToScene(panel), [panel, scene]);
+  useAddToScene(panel, scene);
 
   // Update options
   useEffect(() => {
diff --git a/packages/scenes-react/src/contexts/SceneContextObject.tsx b/packages/scenes-react/src/contexts/SceneContextObject.tsx
index efad0a575..07c247c22 100644
--- a/packages/scenes-react/src/contexts/SceneContextObject.tsx
+++ b/packages/scenes-react/src/contexts/SceneContextObject.tsx
@@ -7,6 +7,7 @@ import {
   NewSceneObjectAddedEvent,
 } from '@grafana/scenes';
 import { writeSceneLog } from '../utils';
+import { useEffect } from 'react';
 
 export interface SceneContextObjectState extends SceneObjectState {
   childContexts?: SceneContextObject[];
@@ -87,3 +88,36 @@ export class SceneContextObject extends SceneObjectBase<SceneContextObjectState>
     writeSceneLog('SceneContext', `Remvoing child context: ${ctx.constructor.name} key: ${ctx.state.key}`);
   }
 }
+
+export function useAddToScene(obj: SceneObject, ctx: SceneContextObject) {
+  // Old behavior
+  if (!SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => ctx.addToScene(obj), [ctx, obj]);
+    return;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const deactivate = obj.activate();
+
+    return () => {
+      writeSceneLog('SceneContext', `Removing from scene: ${obj.constructor.name} key: ${obj.state.key}`);
+      ctx.setState({ children: ctx.state.children.filter((x) => x !== obj) });
+
+      deactivate();
+    };
+  }, [ctx, obj]);
+
+  // Check if scene contains object instance
+  if (ctx.state.children.includes(obj)) {
+    return;
+  }
+
+  // This is technically a state change during render. We have to add it to the state tree right away in order to render the object on the first pass
+  // Should be ok as nothing subscribes to SceneContextObject state changes and the NewSceneObjectAddedEvent is syncing url state to obj state
+  ctx.publishEvent(new NewSceneObjectAddedEvent(obj), true);
+  ctx.setState({ children: [...ctx.state.children, obj] });
+
+  writeSceneLog('SceneContext', `Adding to scene: ${obj.constructor.name} key: ${obj.state.key}`);
+}
diff --git a/packages/scenes-react/src/hooks/useDataTransformer.ts b/packages/scenes-react/src/hooks/useDataTransformer.ts
index 6c1ecadb0..3d367f87e 100644
--- a/packages/scenes-react/src/hooks/useDataTransformer.ts
+++ b/packages/scenes-react/src/hooks/useDataTransformer.ts
@@ -8,6 +8,7 @@ import { useSceneContext } from './hooks';
 import { useEffect, useId } from 'react';
 import { isEqual } from 'lodash';
 import { DataTransformerConfig } from '@grafana/schema';
+import { useAddToScene } from '../contexts/SceneContextObject';
 
 export interface UseDataTransformerOptions {
   transformations: Array<DataTransformerConfig | CustomTransformerDefinition>;
@@ -28,7 +29,7 @@ export function useDataTransformer(options: UseDataTransformerOptions) {
     });
   }
 
-  useEffect(() => scene.addToScene(dataTransformer), [dataTransformer, scene]);
+  useAddToScene(dataTransformer, scene);
 
   useEffect(() => {
     if (!isEqual(dataTransformer.state.transformations, options.transformations)) {
diff --git a/packages/scenes-react/src/hooks/useSceneObject.ts b/packages/scenes-react/src/hooks/useSceneObject.ts
index f44fe0c6a..fc8e36aa5 100644
--- a/packages/scenes-react/src/hooks/useSceneObject.ts
+++ b/packages/scenes-react/src/hooks/useSceneObject.ts
@@ -1,7 +1,8 @@
-import { useEffect, useId } from 'react';
+import { useId } from 'react';
 import { SceneObject, sceneGraph } from '@grafana/scenes';
 import { useSceneContext } from './hooks';
 import { CacheKey, SceneObjectConstructor, getSceneObjectCache } from '../caching/SceneObjectCache';
+import { useAddToScene } from '../contexts/SceneContextObject';
 
 export interface UseSceneObjectProps<T extends SceneObject> {
   factory: (key: string) => T;
@@ -44,7 +45,7 @@ export function useSceneObject<T extends SceneObject>(options: UseSceneObjectPro
     }
   }
 
-  useEffect(() => scene.addToScene(obj), [obj, scene]);
+  useAddToScene(obj, scene);
 
   return obj;
 }
diff --git a/packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx b/packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx
index ac2028082..92496f4ba 100644
--- a/packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx
+++ b/packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx
@@ -1,9 +1,18 @@
 import { Trans } from '@grafana/i18n';
-import React, { RefCallback, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
+import React, { memo, RefCallback, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 import { useMeasure } from 'react-use';
 
 // @ts-ignore
-import { AlertState, GrafanaTheme2, PanelData, PluginContextProvider, SetPanelAttentionEvent } from '@grafana/data';
+import {
+  AlertState,
+  GrafanaTheme2,
+  PanelData,
+  PanelPlugin,
+  PanelProps,
+  PluginContextProvider,
+  PluginType,
+  SetPanelAttentionEvent,
+} from '@grafana/data';
 
 import { getAppEvents } from '@grafana/runtime';
 import { PanelChrome, ErrorBoundaryAlert, PanelContextProvider, Tooltip, useStyles2, Icon } from '@grafana/ui';
@@ -38,7 +47,7 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
     collapsed,
     _renderCounter = 0,
   } = model.useState();
-  const [ref, { width, height }] = useMeasure();
+  let [ref, { width, height }] = useMeasure();
   const appEvents = useMemo(() => getAppEvents(), []);
 
   const setPanelAttention = useCallback(() => {
@@ -78,7 +87,7 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
     }
   });
 
-  const plugin = model.getPlugin();
+  const plugin = model.getPlugin() ?? getLoadingPlugin();
 
   const { dragClass, dragClassCancel } = getDragClasses(model);
   const dragHooks = getDragHooks(model);
@@ -103,16 +112,6 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
   const titleInterpolated = model.interpolate(title, undefined, 'text');
   const alertStateStyles = useStyles2(getAlertStateStyles);
 
-  if (!plugin) {
-    return (
-      <div>
-        <Trans i18nKey="grafana-scenes.components.viz-panel-renderer.loading-plugin-panel">
-          Loading plugin panel...
-        </Trans>
-      </div>
-    );
-  }
-
   if (!plugin.panel) {
     return (
       <div>
@@ -233,73 +232,75 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
   return (
     <div className={relativeWrapper}>
       <div ref={ref as RefCallback<HTMLDivElement>} className={absoluteWrapper} data-viz-panel-key={model.state.key}>
-        {width > 0 && height > 0 && (
-          <PanelChrome
-            title={titleInterpolated}
-            description={description?.trim() ? model.getDescription : undefined}
-            loadingState={data.state}
-            statusMessage={getChromeStatusMessage(data, _pluginLoadError)}
-            statusMessageOnClick={model.onStatusMessageClick}
-            width={width}
-            height={height}
-            selectionId={model.state.key}
-            displayMode={displayMode}
-            titleItems={titleItemsElement.length > 0 ? titleItemsElement : undefined}
-            dragClass={dragClass}
-            actions={actionsElement}
-            dragClassCancel={dragClassCancel}
-            padding={plugin.noPadding ? 'none' : 'md'}
-            menu={panelMenu}
-            onCancelQuery={model.onCancelQuery}
-            onFocus={setPanelAttention}
-            onMouseEnter={setPanelAttention}
-            onMouseMove={debouncedMouseMove}
-            // @ts-expect-error remove this on next grafana/ui update
-            subHeaderContent={subHeaderElement.length ? subHeaderElement : undefined}
-            onDragStart={(e: React.PointerEvent) => {
-              dragHooks.onDragStart?.(e, model);
-            }}
-            showMenuAlways={showMenuAlways}
-            {...(collapsible
-              ? {
-                  collapsible: Boolean(collapsible),
-                  collapsed,
-                  onToggleCollapse: model.onToggleCollapse,
-                }
-              : { hoverHeader, hoverHeaderOffset })}
-          >
-            {(innerWidth, innerHeight) => (
-              <>
-                <ErrorBoundaryAlert dependencies={[plugin, data]}>
-                  <PluginContextProvider meta={plugin.meta}>
-                    <PanelContextProvider value={context}>
-                      {isReadyToRender && (
-                        <PanelComponent
-                          id={panelId}
-                          data={data}
-                          title={title}
-                          timeRange={timeRange}
-                          timeZone={timeZone}
-                          options={options}
-                          fieldConfig={fieldConfig}
-                          transparent={displayMode === 'transparent'}
-                          width={innerWidth}
-                          height={innerHeight}
-                          renderCounter={_renderCounter}
-                          replaceVariables={model.interpolate}
-                          onOptionsChange={model.onOptionsChange}
-                          onFieldConfigChange={model.onFieldConfigChange}
-                          onChangeTimeRange={model.onTimeRangeChange}
-                          eventBus={context.eventBus}
-                        />
-                      )}
-                    </PanelContextProvider>
-                  </PluginContextProvider>
-                </ErrorBoundaryAlert>
-              </>
-            )}
-          </PanelChrome>
-        )}
+        <PanelChrome
+          title={titleInterpolated}
+          description={description?.trim() ? model.getDescription : undefined}
+          loadingState={data.state}
+          statusMessage={getChromeStatusMessage(data, _pluginLoadError)}
+          statusMessageOnClick={model.onStatusMessageClick}
+          width={width === 0 ? undefined : width}
+          height={height === 0 ? undefined : height}
+          selectionId={model.state.key}
+          displayMode={displayMode}
+          titleItems={titleItemsElement.length > 0 ? titleItemsElement : undefined}
+          dragClass={dragClass}
+          actions={actionsElement}
+          dragClassCancel={dragClassCancel}
+          padding={plugin.noPadding ? 'none' : 'md'}
+          menu={panelMenu}
+          onCancelQuery={model.onCancelQuery}
+          onFocus={setPanelAttention}
+          onMouseEnter={setPanelAttention}
+          onMouseMove={debouncedMouseMove}
+          // @ts-expect-error remove this on next grafana/ui update
+          subHeaderContent={subHeaderElement.length ? subHeaderElement : undefined}
+          onDragStart={(e: React.PointerEvent) => {
+            dragHooks.onDragStart?.(e, model);
+          }}
+          showMenuAlways={showMenuAlways}
+          {...(collapsible
+            ? {
+                collapsible: Boolean(collapsible),
+                collapsed,
+                onToggleCollapse: model.onToggleCollapse,
+              }
+            : { hoverHeader, hoverHeaderOffset })}
+        >
+          {(innerWidth, innerHeight) => {
+            if (innerWidth === 0 || innerHeight === 0) {
+              return null;
+            }
+
+            return (
+              <ErrorBoundaryAlert dependencies={[plugin, data]}>
+                <PluginContextProvider meta={plugin.meta}>
+                  <PanelContextProvider value={context}>
+                    {isReadyToRender && (
+                      <PanelComponent
+                        id={panelId}
+                        data={data}
+                        title={title}
+                        timeRange={timeRange}
+                        timeZone={timeZone}
+                        options={options}
+                        fieldConfig={fieldConfig}
+                        transparent={displayMode === 'transparent'}
+                        width={innerWidth}
+                        height={innerHeight}
+                        renderCounter={_renderCounter}
+                        replaceVariables={model.interpolate}
+                        onOptionsChange={model.onOptionsChange}
+                        onFieldConfigChange={model.onFieldConfigChange}
+                        onChangeTimeRange={model.onTimeRangeChange}
+                        eventBus={context.eventBus}
+                      />
+                    )}
+                  </PanelContextProvider>
+                </PluginContextProvider>
+              </ErrorBoundaryAlert>
+            );
+          }}
+        </PanelChrome>
       </div>
     </div>
   );
@@ -400,3 +401,50 @@ const getAlertStateStyles = (theme: GrafanaTheme2) => {
     }),
   };
 };
+
+let loadingPluginInstance: PanelPlugin | null = null;
+
+export function getLoadingPlugin(): PanelPlugin {
+  if (loadingPluginInstance) {
+    return loadingPluginInstance;
+  }
+
+  const LoadingPluginComp = memo<PanelProps>(() => {
+    return (
+      <div>
+        <Trans i18nKey="grafana-scenes.components.viz-panel-renderer.loading-plugin-panel">
+          Loading plugin panel...
+        </Trans>
+      </div>
+    );
+  });
+
+  LoadingPluginComp.displayName = 'LoadingPlugin';
+
+  loadingPluginInstance = new PanelPlugin(LoadingPluginComp);
+
+  loadingPluginInstance.meta = {
+    id: 'loading-plugin',
+    name: 'Loading Plugin',
+    sort: 100,
+    type: PluginType.panel,
+    module: '',
+    baseUrl: '',
+    info: {
+      author: {
+        name: '',
+      },
+      description: '',
+      links: [],
+      logos: {
+        large: '',
+        small: '',
+      },
+      screenshots: [],
+      updated: '',
+      version: '',
+    },
+  };
+
+  return loadingPluginInstance;
+}
diff --git a/packages/scenes/src/components/layout/CSSGrid/SceneCSSGridLayout.tsx b/packages/scenes/src/components/layout/CSSGrid/SceneCSSGridLayout.tsx
index 30d9f1841..7b16396c2 100644
--- a/packages/scenes/src/components/layout/CSSGrid/SceneCSSGridLayout.tsx
+++ b/packages/scenes/src/components/layout/CSSGrid/SceneCSSGridLayout.tsx
@@ -79,7 +79,7 @@ function SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<Scene
 
         if (isLazy) {
           return (
-            <LazyLoader key={item.state.key!} className={style}>
+            <LazyLoader key={item.state.key!} className={style} mode="query">
               <Component key={item.state.key} model={item} parentState={model.state} />
             </LazyLoader>
           );
diff --git a/packages/scenes/src/components/layout/LazyLoader.tsx b/packages/scenes/src/components/layout/LazyLoader.tsx
index da251f6fa..4e4d1699e 100644
--- a/packages/scenes/src/components/layout/LazyLoader.tsx
+++ b/packages/scenes/src/components/layout/LazyLoader.tsx
@@ -4,7 +4,6 @@ import { useEffectOnce } from 'react-use';
 import { uniqueId } from 'lodash';
 import { css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
-import { t } from '@grafana/i18n';
 
 export function useUniqueId(): string {
   const idRefLazy = useRef<string | undefined>(undefined);
@@ -17,8 +16,19 @@ export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'
   key: string;
   onLoad?: () => void;
   onChange?: (isInView: boolean) => void;
+  /**
+   * mount (default) = mounts/renders children when they are first in view.
+   * query = children is always rendered. Only sets the LazyLoaderInViewContext which is used to block query execution for panels out of view
+   */
+  mode?: LazyLoaderMode;
 }
 
+/**
+ * mount (default) = mounts children when they are first in view.
+ * query = children is always rendered. Only sets the LazyLoaderInViewContext which is used to block query execution for panels out of view
+ */
+export type LazyLoaderMode = 'mount' | 'query';
+
 export interface LazyLoaderType extends ForwardRefExoticComponent<Props> {
   addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;
   callbacks: Record<string, (e: IntersectionObserverEntry) => void>;
@@ -26,7 +36,7 @@ export interface LazyLoaderType extends ForwardRefExoticComponent<Props> {
 }
 
 export const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, onLoad, onChange, className, ...rest }, ref) => {
+  ({ children, onLoad, onChange, className, mode = 'mount', ...rest }, ref) => {
     const id = useUniqueId();
     const { hideEmpty } = useStyles2(getStyles);
     const [loaded, setLoaded] = useState(false);
@@ -67,8 +77,9 @@ export const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props
     // If the children render empty, the whole loader will be hidden by css.
     return (
       <div id={id} ref={innerRef} className={`${hideEmpty} ${className}`} {...rest}>
-        {!loaded ? (
-          t('grafana-scenes.components.lazy-loader.placeholder', '\u00A0')
+        {!loaded && mode === 'mount' ? (
+          // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+          '\u00A0'
         ) : (
           <LazyLoaderInViewContext.Provider value={isInView}>{children}</LazyLoaderInViewContext.Provider>
         )}
diff --git a/packages/scenes/src/components/layout/grid/SceneGridLayoutRenderer.tsx b/packages/scenes/src/components/layout/grid/SceneGridLayoutRenderer.tsx
index 01ef86c4e..d9e79bd3b 100644
--- a/packages/scenes/src/components/layout/grid/SceneGridLayoutRenderer.tsx
+++ b/packages/scenes/src/components/layout/grid/SceneGridLayoutRenderer.tsx
@@ -121,6 +121,7 @@ const GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((
         className={cx(className, props.className)}
         style={style}
         ref={ref}
+        mode="query"
       >
         {innerContent}
         {children}
diff --git a/packages/scenes/src/core/SceneComponentWrapper.test.tsx b/packages/scenes/src/core/SceneComponentWrapper.test.tsx
index 15f029719..b8077c488 100644
--- a/packages/scenes/src/core/SceneComponentWrapper.test.tsx
+++ b/packages/scenes/src/core/SceneComponentWrapper.test.tsx
@@ -12,16 +12,17 @@ export interface TestSceneState extends SceneObjectState {
 
 export class TestScene extends SceneObjectBase<TestSceneState> {
   public renderCount = 0;
-
-  public setRenderBeforeActivation(value: boolean) {
-    this._renderBeforeActivation = value;
-  }
+  public wasRenderedWhileInactive?: boolean;
 
   public static Component = ({ model }: SceneComponentProps<TestScene>) => {
     const { name } = model.useState();
 
     model.renderCount += 1;
 
+    if (!model.isActive) {
+      model.wasRenderedWhileInactive = true;
+    }
+
     return (
       <div>
         <div>name: {name}</div>
@@ -31,7 +32,11 @@ export class TestScene extends SceneObjectBase<TestSceneState> {
   };
 }
 
-describe('SceneComponentWrapper', () => {
+describe('SceneComponentWrapper no render before activation', () => {
+  beforeAll(() => {
+    SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = false;
+  });
+
   it('Should render should activate object', () => {
     const scene = new TestScene({ name: 'nested' });
     render(<scene.Component model={scene} />);
@@ -58,13 +63,43 @@ describe('SceneComponentWrapper', () => {
     expect(scene.renderCount).toBe(1);
     expect(screen.getByText('isActive: true')).toBeInTheDocument();
   });
+});
 
-  it('should render component before activation whgen renderBeforeActivation is true', () => {
-    const scene = new TestScene({ name: 'nested' });
-    scene.setRenderBeforeActivation(true);
+describe('SceneComponentWrapper render before activation', () => {
+  beforeAll(() => {
+    SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true;
+  });
 
+  it('Should render should activate object', () => {
+    const scene = new TestScene({ name: 'nested' });
     render(<scene.Component model={scene} />);
 
     expect(scene.renderCount).toBe(2);
+    expect(scene.isActive).toBe(true);
+  });
+
+  it('Unmount should deactivate', () => {
+    const scene = new TestScene({ name: 'nested' });
+    const { unmount } = render(<scene.Component model={scene} />);
+
+    expect(scene.isActive).toBe(true);
+
+    unmount();
+
+    expect(scene.isActive).toBe(false);
+  });
+
+  it('should render component before activation', () => {
+    const scene = new TestScene({ name: 'nested' });
+    const screen = render(<scene.Component model={scene} />);
+
+    expect(scene.wasRenderedWhileInactive).toBe(true);
+    expect(screen.getByText('isActive: true')).toBeInTheDocument();
+  });
+
+  it('should render component before activation whgen renderBeforeActivation is true', () => {
+    const scene = new TestScene({ name: 'nested' });
+    render(<scene.Component model={scene} />);
+    expect(scene.renderCount).toBe(2);
   });
 });
diff --git a/packages/scenes/src/core/SceneObjectBase.tsx b/packages/scenes/src/core/SceneObjectBase.tsx
index 6e4c5cc69..a5c02da9f 100644
--- a/packages/scenes/src/core/SceneObjectBase.tsx
+++ b/packages/scenes/src/core/SceneObjectBase.tsx
@@ -25,6 +25,8 @@ import { SceneObjectRef } from './SceneObjectRef';
 export abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>
   implements SceneObject<TState>
 {
+  public static RENDER_BEFORE_ACTIVATION_DEFAULT = false;
+
   private _isActive = false;
   private _state: TState;
   private _activationHandlers: SceneActivationHandler[] = [];
@@ -35,7 +37,7 @@ export abstract class SceneObjectBase<TState extends SceneObjectState = SceneObj
   protected _parent?: SceneObject;
   protected _subs = new Subscription();
   protected _refCount = 0;
-  protected _renderBeforeActivation = false;
+  protected _renderBeforeActivation = SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT;
 
   protected _variableDependency: SceneVariableDependencyConfigLike | undefined;
   protected _urlSync: SceneObjectUrlSyncHandler | undefined;
diff --git a/packages/scenes/src/index.ts b/packages/scenes/src/index.ts
index ab1b0a794..cd4c9da44 100644
--- a/packages/scenes/src/index.ts
+++ b/packages/scenes/src/index.ts
@@ -131,7 +131,7 @@ export { SceneGridItem } from './components/layout/grid/SceneGridItem';
 export { SceneGridRow } from './components/layout/grid/SceneGridRow';
 export { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';
 export { SplitLayout } from './components/layout/split/SplitLayout';
-export { LazyLoader } from './components/layout/LazyLoader';
+export { LazyLoader, type LazyLoaderMode } from './components/layout/LazyLoader';
 export {
   type SceneAppPageLike,
   type SceneRouteMatch,
diff --git a/packages/scenes/src/locales/en-US/grafana-scenes.json b/packages/scenes/src/locales/en-US/grafana-scenes.json
index 2fc1b1b64..d2fea6381 100644
--- a/packages/scenes/src/locales/en-US/grafana-scenes.json
+++ b/packages/scenes/src/locales/en-US/grafana-scenes.json
@@ -30,9 +30,6 @@
         "group-by-key": "Group by {{keyLabel}}",
         "remove-group-by-key": "Remove group by {{keyLabel}}"
       },
-      "lazy-loader": {
-        "placeholder": "\u00a0"
-      },
       "nested-scene-renderer": {
         "collapse-button-label": "Collapse scene",
         "expand-button-label": "Expand scene",
diff --git a/packages/scenes/src/querying/SceneQueryRunner.test.ts b/packages/scenes/src/querying/SceneQueryRunner.test.ts
index 0e8367f90..f59fa6c7e 100644
--- a/packages/scenes/src/querying/SceneQueryRunner.test.ts
+++ b/packages/scenes/src/querying/SceneQueryRunner.test.ts
@@ -184,6 +184,9 @@ describe.each(['11.1.2', '11.1.1'])('SceneQueryRunner', (v) => {
       expect(sentRequest).toBeDefined();
       const { scopedVars, ...request } = sentRequest!;
 
+      // Remove requestId from snapshot as it depends on test execution order
+      request.requestId = 'test';
+
       expect(Object.keys(scopedVars)).toMatchInlineSnapshot(`
         [
           "__sceneObject",
diff --git a/packages/scenes/src/querying/SceneQueryRunner.ts b/packages/scenes/src/querying/SceneQueryRunner.ts
index 82c4ba8dc..c64c83859 100644
--- a/packages/scenes/src/querying/SceneQueryRunner.ts
+++ b/packages/scenes/src/querying/SceneQueryRunner.ts
@@ -390,7 +390,9 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
 
     this._timeSubRange = timeRange;
     this._timeSub = timeRange.subscribeToState(() => {
-      this.runWithTimeRange(timeRange);
+      // setTimeout to let SceneVariableSet also respond to time range change
+      // So that variables that depend on time range have time to switch to loading state
+      setTimeout(() => this.runWithTimeRange(timeRange), 0);
     });
   }
 
diff --git a/packages/scenes/src/querying/__snapshots__/SceneQueryRunner.test.ts.snap b/packages/scenes/src/querying/__snapshots__/SceneQueryRunner.test.ts.snap
index d7d35cbbb..a9d42c739 100644
--- a/packages/scenes/src/querying/__snapshots__/SceneQueryRunner.test.ts.snap
+++ b/packages/scenes/src/querying/__snapshots__/SceneQueryRunner.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SceneQueryRunner when running query should build DataQueryRequest object 2`] = `
 {
@@ -21,7 +21,7 @@ exports[`SceneQueryRunner when running query should build DataQueryRequest objec
     "from": "now-6h",
     "to": "now",
   },
-  "requestId": "SQR100",
+  "requestId": "test",
   "scopes": undefined,
   "startTime": 1689063488000,
   "targets": [
@@ -57,7 +57,7 @@ exports[`SceneQueryRunner when running query should build DataQueryRequest objec
     "from": "now-6h",
     "to": "now",
   },
-  "requestId": "SQR192",
+  "requestId": "test",
   "scopes": undefined,
   "startTime": 1689063488000,
   "targets": [
diff --git a/packages/scenes/src/querying/layers/annotations/AnnotationsDataLayer.tsx b/packages/scenes/src/querying/layers/annotations/AnnotationsDataLayer.tsx
index 8461be8d8..e96d0e415 100644
--- a/packages/scenes/src/querying/layers/annotations/AnnotationsDataLayer.tsx
+++ b/packages/scenes/src/querying/layers/annotations/AnnotationsDataLayer.tsx
@@ -64,7 +64,9 @@ export class AnnotationsDataLayer
     });
 
     this._timeRangeSub = timeRange.subscribeToState(() => {
-      this.runWithTimeRange(timeRange);
+      // setTimeout to let SceneVariableSet also respond to time range change
+      // So that variables that depend on time range have time to switch to loading state
+      setTimeout(() => this.runWithTimeRange(timeRange), 0);
     });
   }
 
diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx
index f04a3e3ea..8b537e41f 100644
--- a/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx
+++ b/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx
@@ -355,11 +355,11 @@ export class AdHocFiltersVariable
       this.setState({
         originFilters: this.state.originFilters?.filter((filter) => filter.origin !== 'scope'),
       });
+
       return;
     }
 
     const scopeFilters = getAdHocFiltersFromScopes(scopes);
-
     if (!scopeFilters.length) {
       return;
     }
diff --git a/packages/scenes/src/variables/sets/SceneVariableSet.test.tsx b/packages/scenes/src/variables/sets/SceneVariableSet.test.tsx
index 9c3b26ed0..3072bb512 100644
--- a/packages/scenes/src/variables/sets/SceneVariableSet.test.tsx
+++ b/packages/scenes/src/variables/sets/SceneVariableSet.test.tsx
@@ -17,6 +17,7 @@ import { LocalValueVariable } from '../variants/LocalValueVariable';
 import { TestObjectWithVariableDependency, TestScene } from '../TestScene';
 import { activateFullSceneTree } from '../../utils/test/activateFullSceneTree';
 import { SceneVariable, SceneVariableState, VariableValue } from '../types';
+import { ObjectVariable } from '../variants/ObjectVariable';
 
 interface SceneTextItemState extends SceneObjectState {
   text: string;
@@ -208,6 +209,45 @@ describe('SceneVariableList', () => {
         expect((sceneObjectWithVariable as any).renderCount).toBe(3);
       });
     });
+
+    describe('When update process completed and variables have changed values RENDER_BEFORE_ACTIVATION = true', () => {
+      beforeAll(() => (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true));
+      afterAll(() => (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = false));
+
+      it('Should trigger re-renders of dependent scene objects', async () => {
+        const A = new TestVariable({ name: 'A', query: 'A.*', value: '', text: '', options: [] });
+        const B = new TestVariable({ name: 'B', query: 'A.$A.*', value: '', text: '', options: [] });
+
+        const helloText = new SceneTextItem({ text: 'Hello' });
+        const sceneObjectWithVariable = new SceneTextItem({ text: '$A - $B', key: '' });
+
+        const scene = new SceneFlexLayout({
+          $variables: new SceneVariableSet({ variables: [B, A] }),
+          children: [new SceneFlexItem({ body: helloText }), new SceneFlexItem({ body: sceneObjectWithVariable })],
+        });
+
+        render(<scene.Component model={scene} />);
+
+        expect(screen.getByText('Hello')).toBeInTheDocument();
+
+        act(() => {
+          A.signalUpdateCompleted();
+          B.signalUpdateCompleted();
+        });
+
+        expect(screen.getByText('AA - AAA')).toBeInTheDocument();
+        expect((helloText as any).renderCount).toBe(2);
+        expect((sceneObjectWithVariable as any).renderCount).toBe(3);
+
+        act(() => {
+          B.changeValueTo('B');
+        });
+
+        expect(screen.getByText('AA - B')).toBeInTheDocument();
+        expect((helloText as any).renderCount).toBe(2);
+        expect((sceneObjectWithVariable as any).renderCount).toBe(4);
+      });
+    });
   });
 
   describe('When activated with variables update at the same time', () => {
@@ -647,18 +687,23 @@ describe('SceneVariableList', () => {
       expect(innerSet.isVariableLoadingOrWaitingToUpdate(scopedA)).toBe(false);
     });
 
-    it('Should ignore isActivate state', async () => {
-      const A = new TestVariable({ name: 'A', query: 'A.*', value: '', text: '', options: [] });
-      const set = new SceneVariableSet({ variables: [A] });
-      const deactivate = set.activate();
+    describe('When RENDER_BEFORE_ACTIVATION = true', () => {
+      beforeAll(() => (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true));
+      afterAll(() => (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = false));
 
-      // Should start variables with no dependencies
-      expect(A.state.loading).toBe(true);
-      A.signalUpdateCompleted();
+      it('Should return true if variable needs update / validation', async () => {
+        const A = new TestVariable({ name: 'A', query: 'A.*', value: '', text: '', options: [] });
+        const set = new SceneVariableSet({ variables: [A] });
 
-      deactivate();
+        expect(set.isVariableLoadingOrWaitingToUpdate(A)).toBe(true);
+      });
 
-      expect(set.isVariableLoadingOrWaitingToUpdate(A)).toBe(false);
+      it('Should return false if variable does not need update / validation', async () => {
+        const A = new ObjectVariable({ name: 'A', value: { test: 'value' }, type: 'custom' });
+        const set = new SceneVariableSet({ variables: [A] });
+
+        expect(set.isVariableLoadingOrWaitingToUpdate(A)).toBe(false);
+      });
     });
   });
 
@@ -886,6 +931,41 @@ describe('SceneVariableList', () => {
       expect(nestedScene.state.didSomethingCount).toBe(2);
       expect(nestedScene.state.variableValueChanged).toBe(1);
     });
+
+    describe('When RENDER_BEFORE_ACTIVATION = true', () => {
+      beforeAll(() => (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true));
+      afterAll(() => (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = false));
+
+      it('When local value overrides parent variable changes on top level should propagate', () => {
+        const topLevelVar = new TestVariable({
+          name: 'test',
+          options: [],
+          value: 'B',
+          optionsToReturn: [{ label: 'B', value: 'B' }],
+          delayMs: 0,
+        });
+
+        const nestedScene = new TestObjectWithVariableDependency({
+          title: '$test',
+          $variables: new SceneVariableSet({
+            variables: [new LocalValueVariable({ name: 'test', value: 'nestedValue' })],
+          }),
+        });
+
+        const scene = new TestScene({
+          $variables: new SceneVariableSet({ variables: [topLevelVar] }),
+          nested: nestedScene,
+        });
+
+        nestedScene.activate();
+        nestedScene.doSomethingThatRequiresVariables();
+
+        scene.activate();
+
+        expect(nestedScene.state.didSomethingCount).toBe(1);
+        expect(nestedScene.state.variableValueChanged).toBe(1);
+      });
+    });
   });
 
   describe('When changing a dependency while variable is loading', () => {
diff --git a/packages/scenes/src/variables/sets/SceneVariableSet.ts b/packages/scenes/src/variables/sets/SceneVariableSet.ts
index df74ed0c8..fdd2eda54 100644
--- a/packages/scenes/src/variables/sets/SceneVariableSet.ts
+++ b/packages/scenes/src/variables/sets/SceneVariableSet.ts
@@ -294,9 +294,6 @@ export class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> imp
           if (otherVariable.validateAndUpdate) {
             this._variablesToUpdate.add(otherVariable);
           }
-
-          // Because _traverseSceneAndNotify skips itself (and this sets variables) we call this here to notify the variable of the change
-          otherVariable.variableDependency.variableUpdateCompleted(variableThatChanged, true);
         }
       }
     }
@@ -317,8 +314,17 @@ export class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> imp
    * Recursivly walk the full scene object graph and notify all objects with dependencies that include any of changed variables
    */
   private _traverseSceneAndNotify(sceneObject: SceneObject, variable: SceneVariable, hasChanged: boolean) {
-    // No need to notify variables under this SceneVariableSet
+    // Special handling for this SceneVariableSet
     if (this === sceneObject) {
+      for (const childVariable of this.state.variables) {
+        if (childVariable === variable) {
+          continue;
+        }
+
+        if (childVariable.variableDependency) {
+          childVariable.variableDependency.variableUpdateCompleted(variable, hasChanged);
+        }
+      }
       return;
     }
 
@@ -352,6 +358,12 @@ export class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> imp
    * For example if C depends on variable B which depends on variable A and A is loading this returns true for variable C and B.
    */
   public isVariableLoadingOrWaitingToUpdate(variable: SceneVariable) {
+    // When SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT = true then panel and query runners can activate before parents (and variable sets)
+    // So in order to block query execution before set has activated we check if the variable needs update/validation and if so return true here
+    if (SceneObjectBase.RENDER_BEFORE_ACTIVATION_DEFAULT && !this.isActive && this._variableNeedsUpdate(variable)) {
+      return true;
+    }
+
     if (variable.state.loading) {
       return true;
     }
diff --git a/packages/scenes/src/variables/variants/ScopesVariable.tsx b/packages/scenes/src/variables/variants/ScopesVariable.tsx
index 5653f3da5..75c28ce9a 100644
--- a/packages/scenes/src/variables/variants/ScopesVariable.tsx
+++ b/packages/scenes/src/variables/variants/ScopesVariable.tsx
@@ -4,6 +4,7 @@ import {
   SceneVariable,
   SceneVariableState,
   SceneVariableValueChangedEvent,
+  ValidateAndUpdateResult,
   VariableValue,
 } from '../types';
 import { Scope } from '@grafana/data';
@@ -15,6 +16,7 @@ import { SCOPES_VARIABLE_NAME } from '../constants';
 import { isEqual } from 'lodash';
 import { getQueryController } from '../../core/sceneGraph/getQueryController';
 import { SCOPES_CHANGED_INTERACTION } from '../../performance/interactionConstants';
+import { Observable, Subject, of } from 'rxjs';
 
 export interface ScopesVariableState extends SceneVariableState {
   /**
@@ -34,6 +36,7 @@ export class ScopesVariable extends SceneObjectBase<ScopesVariableState> impleme
   // Special options that enables variables to be hidden but still render to access react contexts
   public UNSAFE_renderAsHidden = true;
   public static Component = ScopesVariableRenderer;
+  private _validateAndUpdateObs?: Subject<ValidateAndUpdateResult>;
 
   public constructor(state: Partial<ScopesVariableState>) {
     super({
@@ -47,6 +50,16 @@ export class ScopesVariable extends SceneObjectBase<ScopesVariableState> impleme
     });
   }
 
+  public validateAndUpdate(): Observable<ValidateAndUpdateResult> {
+    if (!this.state.loading) {
+      this._validateAndUpdateObs = undefined;
+      return of({});
+    }
+
+    this._validateAndUpdateObs = new Subject<ValidateAndUpdateResult>();
+    return this._validateAndUpdateObs;
+  }
+
   /**
    * Temporary simple implementation to stringify the scopes.
    */
@@ -105,6 +118,8 @@ export class ScopesVariable extends SceneObjectBase<ScopesVariableState> impleme
       queryController?.startProfile(SCOPES_CHANGED_INTERACTION);
       this.setState({ scopes: state.value, loading });
       this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+      // Signals to SceneVariableSet that we have a value
+      this._validateAndUpdateObs?.next({});
     } else {
       this.setState({ loading });
     }