diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
index f3019a0cd..b9f940e01 100644
--- a/client/packages/lowcoder/index.html
+++ b/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;
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index 5fede0b07..83fe577c9 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/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>
diff --git a/client/packages/lowcoder/src/index.ts b/client/packages/lowcoder/src/index.ts
index 086d19d0e..2072fc849 100644
--- a/client/packages/lowcoder/src/index.ts
+++ b/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);
 }
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index c6fd5f91f..fc2f7536a 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/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={[
diff --git a/client/packages/lowcoder/src/pages/userAuth/index.tsx b/client/packages/lowcoder/src/pages/userAuth/index.tsx
index 40e7a1bc1..d33b48fde 100644
--- a/client/packages/lowcoder/src/pages/userAuth/index.tsx
+++ b/client/packages/lowcoder/src/pages/userAuth/index.tsx
@@ -11,7 +11,7 @@ import { fetchConfigAction } from "redux/reduxActions/configActions";
 import { fetchUserAction } from "redux/reduxActions/userActions";
 import LoginAdmin from "./loginAdmin";
 import _ from "lodash";
-
+import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
 export default function UserAuth() {
   const dispatch = useDispatch();
   const location = useLocation<AuthLocationState>();
@@ -50,6 +50,7 @@ export default function UserAuth() {
         fetchUserAfterAuthSuccess,
       }}
     >
+      <LoadingBarHideTrigger />
       <Switch location={location}>
         <Redirect exact from={USER_AUTH_URL} to={AUTH_LOGIN_URL} />
         <Route exact path={ADMIN_AUTH_URL} component={LoginAdmin} />
diff --git a/client/packages/lowcoder/src/util/hideLoading.tsx b/client/packages/lowcoder/src/util/hideLoading.tsx
new file mode 100644
index 000000000..f4c12c345
--- /dev/null
+++ b/client/packages/lowcoder/src/util/hideLoading.tsx
@@ -0,0 +1,10 @@
+import {useEffect} from "react";
+import {hideLoading} from "@lowcoder-ee/index";
+
+export const LoadingBarHideTrigger = function(props: any) {
+    useEffect(() => {
+        setTimeout(() => hideLoading(), 300);
+    }, []);
+
+    return <></>
+};
\ No newline at end of file