Merge pull request #791 from raheeliftikhar5/appEditor_issues

App editor issues

Author: FalkWolsky

client/packages/lowcoder/src/appView/AppViewInstance.tsx

@@ -11,7 +11,7 @@ import { API_STATUS_CODES } from "constants/apiConstants";
 import { AUTH_LOGIN_URL } from "constants/routesURL";
 import { AuthSearchParams } from "constants/authConstants";
 import { saveAuthSearchParams } from "pages/userAuth/authUtils";
-import { lazy } from "react";
+import { Suspense, lazy } from "react";
 
 const AppView = lazy(
   () => import('./AppView')
@@ -144,14 +144,16 @@ export class AppViewInstance<I = any, O = any> {
     const data = await this.dataPromise;
     this.root.render(
       <StyleSheetManager target={this.node as HTMLElement}>
-        <AppView
-          appId={this.appId}
-          dsl={data.appDsl}
-          moduleDsl={data.moduleDslMap}
-          moduleInputs={this.options.moduleInputs}
-          onCompChange={(comp) => this.handleCompChange(comp)}
-          onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
-        />
+        <Suspense fallback={null}>
+          <AppView
+            appId={this.appId}
+            dsl={data.appDsl}
+            moduleDsl={data.moduleDslMap}
+            moduleInputs={this.options.moduleInputs}
+            onCompChange={(comp) => this.handleCompChange(comp)}
+            onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
+          />
+        </Suspense>
       </StyleSheetManager>
     );
   }

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -222,15 +222,18 @@ const onDrop = async (
     const nameGenerator = editorState.getNameGenerator();
     const compInfo = parseCompType(compType);
     const compName = nameGenerator.genItemName(compInfo.compName);
-    const {
-      defaultDataFnName,
-      defaultDataFnPath,
-    } = uiCompRegistry[compType as UICompType];
-
     let defaultDataFn = undefined;
-    if(defaultDataFnName && defaultDataFnPath) {
-      const module = await import(`../../${defaultDataFnPath}.tsx`);
-      defaultDataFn = module[defaultDataFnName];
+    
+    if (!compInfo.isRemote) {
+      const {
+        defaultDataFnName,
+        defaultDataFnPath,
+      } = uiCompRegistry[compType as UICompType];
+  
+      if(defaultDataFnName && defaultDataFnPath) {
+        const module = await import(`../../${defaultDataFnPath}.tsx`);
+        defaultDataFn = module[defaultDataFnName];
+      }
     }
 
     const widgetValue: GridItemDataType = {

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

@@ -27,7 +27,7 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
-import { StringControl } from "@lowcoder-ee/index.sdk"; 
+import { StringControl } from "comps/controls/codeControl";
 
 const childrenMap = {
   header: SimpleContainerComp,

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

@@ -19,6 +19,7 @@ import { ThemeContext } from "comps/utils/themeContext";
 import { ModuleLayoutCompName } from "constants/compConstants";
 import { defaultTheme as localDefaultTheme } from "comps/controls/styleControlConstants";
 import { ModuleLoading } from "components/ModuleLoading";
+import EditorSkeletonView from "pages/editor/editorSkeletonView";
 import { getGlobalSettings } from "comps/utils/globalSettings";
 import { getCurrentTheme } from "comps/utils/themeUtil";
 import { DataChangeResponderListComp } from "./dataChangeResponderComp";
@@ -29,10 +30,7 @@ import {
   PropertySectionState,
 } from "lowcoder-design";
 import RefTreeComp from "./refTreeComp";
-
-const EditorSkeletonView = lazy(
-  () => import("pages/editor/editorSkeletonView")
-);
+import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
@@ -61,6 +59,7 @@ function RootView(props: RootViewProps) {
   const { comp, isModuleRoot, ...divProps } = props;
   const [editorState, setEditorState] = useState<EditorState>();
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>({});
+  const { readOnly } = useContext(ExternalEditorContext);
   const appThemeId = comp.children.settings.getView().themeId;
   const { orgCommonSettings } = getGlobalSettings();
   const themeList = orgCommonSettings?.themeList || [];
@@ -110,13 +109,15 @@ function RootView(props: RootViewProps) {
     };
   }, [editorState, propertySectionState]);
 
-  // if (!editorState) {
-  //   if (isModuleRoot) {
-  //     return <ModuleLoading />;
-  //   }
-  //   return <EditorSkeletonView />;
-  // }
-  if(!editorState) return <ModuleLoading />;
+  if (!editorState && readOnly) {
+    return <ModuleLoading />;
+  }
+
+  const SuspenseFallback = isModuleRoot ? <ModuleLoading /> : <EditorSkeletonView />;
+
+  if (!editorState) {
+    return SuspenseFallback;
+  }
 
   return (
     <div {...divProps}>
@@ -126,7 +127,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={null}>
+            <Suspense fallback={!readOnly && SuspenseFallback}>
               <EditorView uiComp={comp.children.ui} preloadComp={comp.children.preload} />
             </Suspense>
           </EditorContext.Provider>

client/packages/lowcoder/src/comps/controls/codeControl.tsx

@@ -30,7 +30,7 @@ import {
   toHex,
   wrapperToControlItem,
 } from "lowcoder-design";
-import { lazy, ReactNode } from "react";
+import { lazy, ReactNode, Suspense } from "react";
 import {
   showTransform,
   toArrayJSONObject,
@@ -192,7 +192,7 @@ export function codeControl<
           {(editorState) => (
             <CompExposingContext.Consumer>
               {(exposingData) => (
-                <>
+                <Suspense fallback={null}>
                   <CodeEditor
                     {...params}
                     bordered
@@ -213,7 +213,7 @@ export function codeControl<
                     boostExposingData={exposingData}
                     enableClickCompName={editorState?.forceShowGrid}
                   />
-                </>
+                </Suspense>
               )}
             </CompExposingContext.Consumer>
           )}

client/packages/lowcoder/src/comps/controls/codeTextControl.tsx

@@ -6,7 +6,7 @@ import { CompExposingContext } from "comps/generators/withContext";
 import { exposingDataForAutoComplete } from "comps/utils/exposingTypes";
 import { ControlPropertyViewWrapper } from "lowcoder-design";
 import { debounce } from "lodash";
-import { ReactNode, lazy, useContext, useMemo } from "react";
+import { ReactNode, Suspense, lazy, useContext, useMemo } from "react";
 import type { CodeEditorProps } from "base/codeEditor/codeEditorTypes";
 
 const CodeEditor = lazy(
@@ -38,16 +38,18 @@ function CodeTextEditor(props: CodeTextEditorProps) {
   }, [compExposingData, editorState, enableExposingDataAutoCompletion]);
 
   return (
-    <CodeEditor
-      {...params}
-      bordered
-      disableCard
-      value={codeText}
-      exposingData={expsoingData}
-      boostExposingData={compExposingData}
-      onChange={(state) => onChange(state.doc.toString())}
-      enableClickCompName={editorState.forceShowGrid}
-    />
+    <Suspense fallback={null}>
+      <CodeEditor
+        {...params}
+        bordered
+        disableCard
+        value={codeText}
+        exposingData={expsoingData}
+        boostExposingData={compExposingData}
+        onChange={(state) => onChange(state.doc.toString())}
+        enableClickCompName={editorState.forceShowGrid}
+      />
+    </Suspense>
   );
 }
 

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

@@ -136,7 +136,7 @@ export default function AppEditor() {
   return (
     <ErrorBoundary>
       {showAppSnapshot ? (
-        <Suspense fallback={null}>
+        <Suspense fallback={<EditorSkeletonView />}>
           <AppSnapshot
             currentAppInfo={{
               ...appInfo,
@@ -145,7 +145,7 @@ export default function AppEditor() {
           />
         </Suspense>
       ) : (
-        <Suspense fallback={null}>
+        <Suspense fallback={<EditorSkeletonView />}>
           <AppEditorInternalView
             appInfo={appInfo}
             readOnly={readOnly}

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

@@ -28,6 +28,7 @@ import {
   UserGuideLocationState,
 } from "pages/tutorials/tutorialsConstant";
 import React, {
+  Suspense,
   lazy,
   useCallback,
   useContext,
@@ -51,6 +52,7 @@ import {
   saveEditorModeStatus,
 } from "util/localStorageUtil";
 import { isAggregationApp } from "util/appUtils";
+import EditorSkeletonView from "./editorSkeletonView";
 
 const LeftContent = lazy(
   () => import('./LeftContent')
@@ -455,6 +457,7 @@ 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>
+
       {showNewUserGuide && <EditorTutorials />}
       <EditorGlobalHotKeys
         disabled={readOnly}