Merge pull request #792 from raheeliftikhar5/flickering-issue

Fixed flickering issue in app editor

Author: FalkWolsky

client/packages/lowcoder/src/app.tsx

@@ -142,8 +142,9 @@ class AppIndex extends React.Component<AppIndexProps, any> {
               />
             )}
             <LazyRoute exact path={IMPORT_APP_FROM_TEMPLATE_URL} component={LazyAppFromTemplate} />
-            <LazyRoute path={APP_EDITOR_URL} component={LazyAppEditor} />
+            <LazyRoute fallback="layout" path={APP_EDITOR_URL} component={LazyAppEditor} />
             <LazyRoute
+              fallback="layout"
               path={[
                 ALL_APPLICATIONS_URL,
                 DATASOURCE_CREATE_URL,

client/packages/lowcoder/src/components/LazyRoute.tsx

@@ -2,6 +2,8 @@ import { default as Skeleton } from "antd/es/skeleton";
 import { ComponentType, lazy, Suspense, useRef } from "react";
 import { Route, RouteProps } from "react-router";
 import PageSkeleton from "./PageSkeleton";
+import EditorSkeletonView from "@lowcoder-ee/pages/editor/editorSkeletonView";
+import { ProductLoading } from "./ProductLoading";
 
 interface IProps extends RouteProps {
   /**
@@ -13,7 +15,7 @@ interface IProps extends RouteProps {
 
 const fallbacks = {
   normal: <Skeleton style={{ padding: 32 }} />,
-  layout: <PageSkeleton />,
+  layout: <ProductLoading />,
   outAppLayout: <PageSkeleton logoWithName />,
 };
 

client/packages/lowcoder/src/comps/comps/rootComp.tsx

@@ -31,6 +31,7 @@ import {
 } from "lowcoder-design";
 import RefTreeComp from "./refTreeComp";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
+import { useUserViewMode } from "util/hooks";
 
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
@@ -60,6 +61,7 @@ function RootView(props: RootViewProps) {
   const [editorState, setEditorState] = useState<EditorState>();
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>({});
   const { readOnly } = useContext(ExternalEditorContext);
+  const isUserViewMode = useUserViewMode();
   const appThemeId = comp.children.settings.getView().themeId;
   const { orgCommonSettings } = getGlobalSettings();
   const themeList = orgCommonSettings?.themeList || [];
@@ -109,7 +111,7 @@ function RootView(props: RootViewProps) {
     };
   }, [editorState, propertySectionState]);
 
-  if (!editorState && readOnly) {
+  if (!editorState && !isUserViewMode && readOnly) {
     return <ModuleLoading />;
   }
 
@@ -127,7 +129,7 @@ function RootView(props: RootViewProps) {
             {Object.keys(comp.children.queries.children).map((key) => (
               <div key={key}>{comp.children.queries.children[key].getView()}</div>
             ))}
-            <Suspense fallback={!readOnly && SuspenseFallback}>
+            <Suspense fallback={!readOnly || isUserViewMode ? SuspenseFallback : null}>
               <EditorView uiComp={comp.children.ui} preloadComp={comp.children.preload} />
             </Suspense>
           </EditorContext.Provider>

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

@@ -393,15 +393,17 @@ function EditorView(props: EditorViewProps) {
             <script key="clearbit-script" src="https://tag.clearbitscripts.com/v1/pk_931b51e405557300e6a7c470e8247d5f/tags.js" referrerPolicy="strict-origin-when-cross-origin" type="text/javascript"></script>
           ]}
         </Helmet>
-        {!hideBodyHeader && <PreviewHeader />}
-        <EditorContainerWithViewMode>
-          <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
-            {uiComp.getView()}
-          </ViewBody>
-          <div style={{ zIndex: Layers.hooksCompContainer }}>
-            {hookCompViews}
-          </div>
-        </EditorContainerWithViewMode>
+        <Suspense fallback={<EditorSkeletonView />}>
+          {!hideBodyHeader && <PreviewHeader />}
+          <EditorContainerWithViewMode>
+            <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
+              {uiComp.getView()}
+            </ViewBody>
+            <div style={{ zIndex: Layers.hooksCompContainer }}>
+              {hookCompViews}
+            </div>
+          </EditorContainerWithViewMode>
+        </Suspense>
       </CustomShortcutWrapper>
     );
   }