Feature loading indicator

client/packages/lowcoder/index.html

@@ -28,6 +28,8 @@
         display: flex;
         pointer-events: none;
         flex-direction: column;
+        top: 0;
+        z-index: 10000;
       }
       #loading svg {
         animation: breath 1s linear infinite;

client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx

@@ -15,7 +15,7 @@ const Wrapper = styled.div<{
   $itemHeight?: number;
 }>`
   position: relative;
-  width: 100%;
+  width: auto;
   height: ${(props) => props.$itemHeight ?? 30}px;
   /* border: 1px solid #d7d9e0; */
   border-radius: 4px;

client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx

@@ -6,6 +6,7 @@ import { DraggableTreeContext } from "./DraggableTreeContext";
 import DroppablePlaceholder from "./DroppablePlaceHolder";
 import { DraggableTreeNode, DraggableTreeNodeItemRenderProps, IDragData, IDropData } from "./types";
 import { checkDroppableFlag } from "./util";
+import { Flex } from "antd";
 
 const DraggableMenuItemWrapper = styled.div`
   position: relative;
@@ -88,29 +89,34 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
             disabled={isDragging || disabled}
           />
         )}
-        <DraggableItem
-          path={path}
-          id={id}
-          dropInAsSub={dropInAsSub && canDropIn !== false}
-          isOver={isOver}
-          ref={(node) => {
-            setDragNodeRef(node);
-            setDropNodeRef(node);
-          }}
-          {...dragListeners}
-        >
-          {renderContent?.({
-            node: item,
-            isOver,
-            path,
-            isOverlay,
-            hasChildren: items.length > 0,
-            dragging: !!(isDragging || parentDragging),
-            isFolded: isFold,
-            onDelete: () => onDelete?.(path),
-            onToggleFold: () => context.toggleFold(id),
-          }) || null}
-        </DraggableItem>
+        <Flex style={{paddingLeft: '15px'}} align="center">
+          <DraggableItem
+              path={path}
+              id={id}
+              dropInAsSub={dropInAsSub && canDropIn !== false}
+              isOver={isOver}
+              ref={(node) => {
+                setDragNodeRef(node);
+                setDropNodeRef(node);
+              }}
+              {...dragListeners}
+          >
+            <span style={{cursor: "default"}}>⣿</span>
+          </DraggableItem>
+          <div style={{flex: 1}}>
+            {renderContent?.({
+              node: item,
+              isOver,
+              path,
+              isOverlay,
+              hasChildren: items.length > 0,
+              dragging: !!(isDragging || parentDragging),
+              isFolded: isFold,
+              onDelete: () => onDelete?.(path),
+              onToggleFold: () => context.toggleFold(id),
+            }) || null}
+          </div>
+        </Flex>
       </DraggableMenuItemWrapper>
       {items.length > 0 && !isFold && (
         <div className="sub-menu-list">

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

@@ -34,7 +34,7 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { useUserViewMode } from "util/hooks";
 import React from "react";
 import { isEqual } from "lodash";
-
+import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
 );
@@ -138,6 +138,7 @@ const RootView = React.memo((props: RootViewProps) => {
               <div key={key}>{comp.children.queries.children[key].getView()}</div>
             ))}
             <Suspense fallback={!readOnly || isUserViewMode ? SuspenseFallback : null}>
+              <LoadingBarHideTrigger />
               <EditorView uiComp={comp.children.ui} preloadComp={comp.children.preload} />
             </Suspense>
           </EditorContext.Provider>

client/packages/lowcoder/src/constants/reduxActionConstants.ts

@@ -9,7 +9,7 @@ export const ReduxActionTypes = {
   FETCH_RAW_CURRENT_USER_SUCCESS: "FETCH_RAW_CURRENT_USER_SUCCESS",
   FETCH_API_KEYS: "FETCH_API_KEYS",
   FETCH_API_KEYS_SUCCESS: "FETCH_API_KEYS_SUCCESS",
-
+  MOVE_TO_FOLDER2_SUCCESS: "MOVE_TO_FOLDER2_SUCCESS",
 
   /* plugin RELATED */
   FETCH_DATA_SOURCE_TYPES: "FETCH_DATA_SOURCE_TYPES",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2785,6 +2785,7 @@ export const en = {
     "switch": "Switch Component: "
   },
   "module": {
+    "folderNotEmpty": "Folder is not empty",
     "emptyText": "No Data",
     "docLink": "Read More About Modules...",
     "documentationText" : "Modules are complete Applications, that can get included and repeated in other Applications and it functions just like a single component. As modules can get embedded, they need to be able to interact with your outside apps or websites. This four settings help to support communication with a Module.",

client/packages/lowcoder/src/index.ts

@@ -24,7 +24,7 @@ if (!window.ResizeObserver) {
   window.ResizeObserver = ResizeObserver;
 }
 
-function hideLoading() {
+export function hideLoading() {
   // hide loading
   const node = document.getElementById("loading");
   if (node) {
@@ -42,7 +42,7 @@ debug(`REACT_APP_LOG_LEVEL:, ${REACT_APP_LOG_LEVEL}`);
 
 try {
   bootstrap();
-  hideLoading();
+  // hideLoading();
 } catch (e) {
   log.error(e);
 }

client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

@@ -73,7 +73,7 @@ import AppEditor from "../editor/AppEditor";
 import { fetchDeploymentIdAction } from "@lowcoder-ee/redux/reduxActions/configActions";
 import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
 import { SimpleSubscriptionContextProvider } from '@lowcoder-ee/util/context/SimpleSubscriptionContext';
-
+import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
 const TabLabel = styled.div`
   font-weight: 500;
 `;
@@ -222,6 +222,7 @@ export default function ApplicationHome() {
 
   return (
     <DivStyled>
+      <LoadingBarHideTrigger />
       <SimpleSubscriptionContextProvider>
         <Layout
           sections={[