fixed app dsl saved again another app on rapid navigation + fixed global data variables lost b/w app navigation

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/generators/hookToComp.tsx

@@ -1,7 +1,8 @@
 import { JSONObject } from "util/jsonTypes";
 import { simpleMultiComp, stateComp, valueComp, withViewFn } from "comps/generators";
 import { withSimpleExposing } from "comps/generators/withExposing";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
+import { isEqual } from "lodash";
 
 /**
  * Enter a react hook and return a comp that exposes the data and methods provided by the hook
@@ -33,11 +34,11 @@ export function hookToStateComp(useHookFn: () => JSONObject) {
     }),
     (comp) => {
       const hookValue = useHookFn();
-      useEffect(() => {
-        if (hookValue !== comp.children.stateValue.getView()) {
-          comp.children.stateValue.dispatchChangeValueAction(hookValue);
-        }
-      }, []);
+      const stateValue = useMemo(() => comp.children.stateValue.getView(), [comp.children.stateValue]);
+
+      if (!isEqual(hookValue, stateValue)) {
+        comp.children.stateValue.dispatchChangeValueAction(hookValue);
+      }
       return null;
     }
   );

client/packages/lowcoder/src/comps/hooks/themeComp.tsx

@@ -6,6 +6,7 @@ import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { getGlobalSettings } from "comps/utils/globalSettings";
 import { getCurrentTheme } from "comps/utils/themeUtil";
 import { trans } from "i18n";
+import { isEqual } from "lodash";
 import { useContext, useEffect, useMemo } from "react";
 import { getThemeList } from "redux/selectors/commonSettingSelectors";
 import { useSelector } from "redux/store/store";
@@ -47,12 +48,28 @@ let ThemeTempComp = withViewFn(
     const editorState = useContext(EditorContext);
     const appThemeId = editorState?.getAppSettings().themeId;
     const currentTheme = getCurrentTheme(themeList, appThemeId);
-    useEffect(() => {
+    const stateValue = useMemo(() => comp.children.stateValue.getView(), [comp.children.stateValue]);
+    
+    const themeValue = useMemo(() => {
+      if (
+        currentTheme?.id !== stateValue.id
+        || currentTheme?.id !== stateValue.name
+        || !isEqual(themeList, stateValue.allThemes)
+      ) {
+        return {
+          ...exposingTheme(currentTheme),
+          allThemes: themeList.map((t) => exposingTheme(t)),
+        }
+      }
+      return stateValue;
+    }, [themeList, currentTheme, stateValue])
+
+    if (!isEqual(themeValue, stateValue)) {
       comp.children.stateValue.dispatchChangeValueAction({
         ...exposingTheme(currentTheme),
         allThemes: themeList.map((t) => exposingTheme(t)),
-      });
-    }, [themeList, currentTheme]);
+      })
+    }
     return null;
   }
 );

client/packages/lowcoder/src/pages/editor/AppEditor.tsx

@@ -88,6 +88,7 @@ const AppEditor = React.memo(() => {
   const [isDataSourcePluginRegistered, setIsDataSourcePluginRegistered] = useState(false);
   const [appError, setAppError] = useState('');
   const [blockEditing, setBlockEditing] = useState<boolean>(false);
+  const [fetchingAppDetails, setFetchingAppDetails] = useState<boolean>(false);
 
   setGlobalSettings({ applicationId, isViewMode: paramViewMode === "view" });
 
@@ -174,6 +175,7 @@ const AppEditor = React.memo(() => {
   }, [dispatch, fetchOrgGroupsFinished, orgId]);
 
   const fetchApplication = useCallback(() => {
+    setFetchingAppDetails(true);
     dispatch(
       fetchApplicationInfo({
         type: viewMode,
@@ -190,9 +192,11 @@ const AppEditor = React.memo(() => {
           });
           setAppInfo(info);
           fetchJSDataSourceByApp();
+          setFetchingAppDetails(false);
         },
         onError: (errorMessage) => {
           setAppError(errorMessage);
+          setFetchingAppDetails(false);
         }
       })
     );
@@ -249,16 +253,21 @@ const AppEditor = React.memo(() => {
         </Suspense>
       ) : (
         <Suspense fallback={<EditorSkeletonView />}>
-          <AppEditorInternalView
-            appInfo={appInfo}
-            readOnly={readOnly}
-            blockEditing={blockEditing}
-            loading={
-              !fetchOrgGroupsFinished || !isDataSourcePluginRegistered || isCommonSettingsFetching
-            }
-            compInstance={compInstance}
-            fetchApplication={fetchApplication}
-          />
+          {fetchingAppDetails
+            ? <EditorSkeletonView />
+            : (
+              <AppEditorInternalView
+                appInfo={appInfo}
+                readOnly={readOnly}
+                blockEditing={blockEditing}
+                loading={
+                  !fetchOrgGroupsFinished || !isDataSourcePluginRegistered || isCommonSettingsFetching
+                }
+                compInstance={compInstance}
+                fetchApplication={fetchApplication}
+              />
+            )
+          }
         </Suspense>
       )}
     </ErrorBoundary>

client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx

@@ -55,9 +55,21 @@ function useSaveComp(
     }
     const curJson = comp.toJsonValue();
     const curJsonStr = JSON.stringify(curJson);
-    if (prevJsonStr === curJsonStr || (Boolean(prevAppId) && prevAppId !== applicationId)) {
+
+
+    if (!Boolean(prevAppId) && Boolean(applicationId)) {
+      return setPrevAppId(applicationId);
+    }
+    if (prevAppId !== applicationId) {
+      return setPrevAppId(applicationId);
+    }
+    if (!Boolean(prevJsonStr) && Boolean(curJsonStr)) {
+      return setPrevJsonStr(curJsonStr);
+    }
+    if (prevJsonStr === curJsonStr) {
       return;
     }
+
     // the first time is a normal change, the latter is the manual update
     if (prevComp) {
       dispatch(