From b22ab998e5643df115c6707187e6b137b5e055be Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 3 Apr 2024 02:13:07 +0500
Subject: [PATCH 1/2] fixed flickering issues in app editor

---
 client/packages/lowcoder/src/app.tsx          |  3 ++-
 .../lowcoder/src/components/LazyRoute.tsx     |  4 +++-
 .../lowcoder/src/comps/comps/rootComp.tsx     |  6 ++++--
 .../src/pages/editor/editorSkeletonView.tsx   |  4 ++--
 .../lowcoder/src/pages/editor/editorView.tsx  | 20 ++++++++++---------
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 3779019d2..e51f526dc 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/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,
diff --git a/client/packages/lowcoder/src/components/LazyRoute.tsx b/client/packages/lowcoder/src/components/LazyRoute.tsx
index 0b0e27c3d..0eaea363c 100644
--- a/client/packages/lowcoder/src/components/LazyRoute.tsx
+++ b/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 />,
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index 59359af43..cc65f7342 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/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>
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index a38afd104..01e643847 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -12,8 +12,8 @@ import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
 import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
 import styled from "styled-components";
-import { default as Skeleton } from "antd/es/skeleton";
-import { default as Spin } from "antd/es/spin";
+import { default as Skeleton } from "antd/lib/skeleton";
+import { default as Spin } from "antd/lib/spin";
 import { useTemplateViewMode, useUserViewMode } from "util/hooks";
 import { ProductLoading } from "components/ProductLoading";
 
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index bde656267..82594cc68 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/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>
     );
   }

From aff6aa99d6faae6d339db10becf4030653f9e0fe Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 3 Apr 2024 02:15:05 +0500
Subject: [PATCH 2/2] revert change

---
 .../packages/lowcoder/src/pages/editor/editorSkeletonView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index 01e643847..a38afd104 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -12,8 +12,8 @@ import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
 import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
 import styled from "styled-components";
-import { default as Skeleton } from "antd/lib/skeleton";
-import { default as Spin } from "antd/lib/spin";
+import { default as Skeleton } from "antd/es/skeleton";
+import { default as Spin } from "antd/es/spin";
 import { useTemplateViewMode, useUserViewMode } from "util/hooks";
 import { ProductLoading } from "components/ProductLoading";