diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx index 6fda3fbc5e..3d33fe799e 100644 --- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx +++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx @@ -66,6 +66,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element { dashboardQueryRangeCalled, setDashboardQueryRangeCalled, setSelectedRowWidgetId, + isDashboardFetching, } = useDashboard(); const { data } = selectedDashboard || {}; const { pathname } = useLocation(); @@ -231,7 +232,8 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element { !isEqual(layouts, dashboardLayout) && !isDashboardLocked && saveLayoutPermission && - !updateDashboardMutation.isLoading + !updateDashboardMutation.isLoading && + !isDashboardFetching ) { onSaveHandler(); } diff --git a/frontend/src/providers/Dashboard/Dashboard.tsx b/frontend/src/providers/Dashboard/Dashboard.tsx index 76cadda908..aff7b7371c 100644 --- a/frontend/src/providers/Dashboard/Dashboard.tsx +++ b/frontend/src/providers/Dashboard/Dashboard.tsx @@ -73,6 +73,7 @@ const DashboardContext = createContext({ setDashboardQueryRangeCalled: () => {}, selectedRowWidgetId: '', setSelectedRowWidgetId: () => {}, + isDashboardFetching: false, }); interface Props { @@ -192,6 +193,8 @@ export function DashboardProvider({ const { t } = useTranslation(['dashboard']); const dashboardRef = useRef(); + const [isDashboardFetching, setIsDashboardFetching] = useState(false); + const mergeDBWithLocalStorage = ( data: Dashboard, localStorageVariables: any, @@ -256,10 +259,16 @@ export function DashboardProvider({ [REACT_QUERY_KEY.DASHBOARD_BY_ID, isDashboardPage?.params], { enabled: (!!isDashboardPage || !!isDashboardWidgetPage) && isLoggedIn, - queryFn: () => - getDashboard({ - uuid: dashboardId, - }), + queryFn: async () => { + setIsDashboardFetching(true); + try { + return await getDashboard({ + uuid: dashboardId, + }); + } finally { + setIsDashboardFetching(false); + } + }, refetchOnWindowFocus: false, onSuccess: (data) => { const updatedDashboardData = transformDashboardVariables(data); @@ -424,6 +433,7 @@ export function DashboardProvider({ setDashboardQueryRangeCalled, selectedRowWidgetId, setSelectedRowWidgetId, + isDashboardFetching, }), // eslint-disable-next-line react-hooks/exhaustive-deps [ @@ -445,6 +455,7 @@ export function DashboardProvider({ setDashboardQueryRangeCalled, selectedRowWidgetId, setSelectedRowWidgetId, + isDashboardFetching, ], ); diff --git a/frontend/src/providers/Dashboard/types.ts b/frontend/src/providers/Dashboard/types.ts index 17d55e767c..c5e5cbca14 100644 --- a/frontend/src/providers/Dashboard/types.ts +++ b/frontend/src/providers/Dashboard/types.ts @@ -47,4 +47,5 @@ export interface IDashboardContext { setDashboardQueryRangeCalled: (value: boolean) => void; selectedRowWidgetId: string | null; setSelectedRowWidgetId: React.Dispatch>; + isDashboardFetching: boolean; }