fix: fixed widgets not visible after saving in the dashboard detail (S…

…igNoz#7106)

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();
 		}

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -73,6 +73,7 @@ const DashboardContext = createContext<IDashboardContext>({
 	setDashboardQueryRangeCalled: () => {},
 	selectedRowWidgetId: '',
 	setSelectedRowWidgetId: () => {},
+	isDashboardFetching: false,
 });
 
 interface Props {
@@ -192,6 +193,8 @@ export function DashboardProvider({
 	const { t } = useTranslation(['dashboard']);
 	const dashboardRef = useRef<Dashboard>();
 
+	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(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,
 		],
 	);
 

frontend/src/providers/Dashboard/types.ts

@@ -47,4 +47,5 @@ export interface IDashboardContext {
 	setDashboardQueryRangeCalled: (value: boolean) => void;
 	selectedRowWidgetId: string | null;
 	setSelectedRowWidgetId: React.Dispatch<React.SetStateAction<string | null>>;
+	isDashboardFetching: boolean;
 }