IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

AppRootPage: Reduce flickering while loading plugin (#66799)

Browse Source 
* AppRootPage: Reduce flickering while loading

* Use current layout
This commit is contained in:
Torkel Ödegaard 2023-04-19 12:10:57 +02:00 committed by GitHub
parent 5c129455f6
commit ba92f6f98a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/core/components/AppChrome/AppChromeService.tsx
View File

@ -32,7 +32,7 @@ export class AppChromeService {
sectionNav: { node: { text: t('nav.home.title', 'Home') }, main: { text: '' } }, sectionNav: { node: { text: t('nav.home.title', 'Home') }, main: { text: '' } },
searchBarHidden: store.getBool(this.searchBarStorageKey, false), searchBarHidden: store.getBool(this.searchBarStorageKey, false),
kioskMode: null, kioskMode: null,
layout: PageLayoutType.Standard, layout: PageLayoutType.Canvas,
}); });
setMatchedRoute(route: RouteDescriptor) { setMatchedRoute(route: RouteDescriptor) {
@ -77,6 +77,7 @@ export class AppChromeService {
if (newState.sectionNav !== current.sectionNav || newState.pageNav !== current.pageNav) { if (newState.sectionNav !== current.sectionNav || newState.pageNav !== current.pageNav) {
if ( if (
newState.actions === current.actions && newState.actions === current.actions &&
newState.layout === current.layout &&
navItemsAreTheSame(newState.sectionNav.node, current.sectionNav.node) && navItemsAreTheSame(newState.sectionNav.node, current.sectionNav.node) &&
navItemsAreTheSame(newState.pageNav, current.pageNav) navItemsAreTheSame(newState.pageNav, current.pageNav)
) { ) {

10
public/app/features/plugins/components/AppRootPage.tsx
View File

@ -7,6 +7,7 @@ import { AppEvents, AppPlugin, AppPluginMeta, NavModel, NavModelItem, PluginType
import { config, locationSearchToObject } from '@grafana/runtime'; import { config, locationSearchToObject } from '@grafana/runtime';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import PageLoader from 'app/core/components/PageLoader/PageLoader'; import PageLoader from 'app/core/components/PageLoader/PageLoader';
import { useGrafana } from 'app/core/context/GrafanaContext';
import { appEvents } from 'app/core/core'; import { appEvents } from 'app/core/core';
import { getNotFoundNav, getWarningNav, getExceptionNav } from 'app/core/navigation/errorModels'; 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 navModel = buildPluginSectionNav(pluginNavSection, pluginNav, currentUrl);
const queryParams = useMemo(() => locationSearchToObject(location.search), [location.search]); const queryParams = useMemo(() => locationSearchToObject(location.search), [location.search]);
const context = useMemo(() => buildPluginPageContext(navModel), [navModel]); const context = useMemo(() => buildPluginPageContext(navModel), [navModel]);
const grafanaContext = useGrafana();
useEffect(() => { useEffect(() => {
loadAppPlugin(pluginId, dispatch); loadAppPlugin(pluginId, dispatch);
@ -52,7 +54,13 @@ export function AppRootPage({ pluginId, pluginNavSection }: Props) {
); );
if (!plugin || pluginId !== plugin.meta.id) { 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) { if (!plugin.root) {