From ba92f6f98aa0fff92f8ee07a08b031cd6fc38fdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 19 Apr 2023 12:10:57 +0200
Subject: [PATCH] AppRootPage: Reduce flickering while loading plugin (#66799)

* AppRootPage: Reduce flickering while loading

* Use current layout
---
 .../app/core/components/AppChrome/AppChromeService.tsx |  3 ++-
 public/app/features/plugins/components/AppRootPage.tsx | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index f2fa78f168f..32f23a690df 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/public/app/core/components/AppChrome/AppChromeService.tsx
@@ -32,7 +32,7 @@ export class AppChromeService {
     sectionNav: { node: { text: t('nav.home.title', 'Home') }, main: { text: '' } },
     searchBarHidden: store.getBool(this.searchBarStorageKey, false),
     kioskMode: null,
-    layout: PageLayoutType.Standard,
+    layout: PageLayoutType.Canvas,
   });
 
   setMatchedRoute(route: RouteDescriptor) {
@@ -77,6 +77,7 @@ export class AppChromeService {
     if (newState.sectionNav !== current.sectionNav || newState.pageNav !== current.pageNav) {
       if (
         newState.actions === current.actions &&
+        newState.layout === current.layout &&
         navItemsAreTheSame(newState.sectionNav.node, current.sectionNav.node) &&
         navItemsAreTheSame(newState.pageNav, current.pageNav)
       ) {
diff --git a/public/app/features/plugins/components/AppRootPage.tsx b/public/app/features/plugins/components/AppRootPage.tsx
index da1132db22a..c27159a4ed7 100644
--- a/public/app/features/plugins/components/AppRootPage.tsx
+++ b/public/app/features/plugins/components/AppRootPage.tsx
@@ -7,6 +7,7 @@ import { AppEvents, AppPlugin, AppPluginMeta, NavModel, NavModelItem, PluginType
 import { config, locationSearchToObject } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
+import { useGrafana } from 'app/core/context/GrafanaContext';
 import { appEvents } from 'app/core/core';
 import { getNotFoundNav, getWarningNav, getExceptionNav } from 'app/core/navigation/errorModels';
 
@@ -41,6 +42,7 @@ export function AppRootPage({ pluginId, pluginNavSection }: Props) {
   const navModel = buildPluginSectionNav(pluginNavSection, pluginNav, currentUrl);
   const queryParams = useMemo(() => locationSearchToObject(location.search), [location.search]);
   const context = useMemo(() => buildPluginPageContext(navModel), [navModel]);
+  const grafanaContext = useGrafana();
 
   useEffect(() => {
     loadAppPlugin(pluginId, dispatch);
@@ -52,7 +54,13 @@ export function AppRootPage({ pluginId, pluginNavSection }: Props) {
   );
 
   if (!plugin || pluginId !== plugin.meta.id) {
-    return <Page navModel={navModel}>{loading && <PageLoader />}</Page>;
+    // Use current layout while loading to reduce flickering
+    const currentLayout = grafanaContext.chrome.state.getValue().layout;
+    return (
+      <Page navModel={navModel} pageNav={{ text: '' }} layout={currentLayout}>
+        {loading && <PageLoader />}
+      </Page>
+    );
   }
 
   if (!plugin.root) {