fix(flat-components): loading page covers the top bar (#1204)

netless-io · Dec 13, 2021 · d2d1694 · d2d1694
1 parent 6eee33a
commit d2d1694
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/packages/flat-components/src/components/LoadingPage/index.tsx b/packages/flat-components/src/components/LoadingPage/index.tsx
@@ -10,19 +10,26 @@ import { useTranslation } from "react-i18next";
 export interface LoadingPageProps {
     text?: string;
     timeMS?: number;
+    hasHeader?: boolean;
 }
 
-export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000 }) => {
+export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, hasHeader }) => {
     const [isShowReturnHomePage, showReturnHomePage] = useState(false);
     const { t } = useTranslation();
 
     useEffect(() => {
         const ticket = window.setTimeout(() => showReturnHomePage(true), timeMS);
         return () => window.clearTimeout(ticket);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (
         <div className="loading-page">
+            <div
+                className={classNames("loading-page-mask", {
+                    "is-transparent": hasHeader,
+                })}
+            />
             <div className="loading-page-content">
                 <img className="loading-page-image" src={loadingGIF} alt="loading" />
                 {text && <span>{text}</span>}

diff --git a/packages/flat-components/src/components/LoadingPage/style.less b/packages/flat-components/src/components/LoadingPage/style.less
@@ -1,24 +1,37 @@
 .loading-page {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
     z-index: 1002;
-    color: #7a7b7c;
-    background-color: white;
+}
+
+.loading-page-mask {
+    width: 100%;
+    height: 50px;
+    pointer-events: none;
+    background-color: #fff;
+
+    &.is-transparent {
+        background-color: transparent;
+    }
 }
 
 .loading-page-content {
+    width: 100%;
+    padding-bottom: 50px;
     flex: 1;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
+    color: #7a7b7c;
+    background-color: white;
 }
 
 .loading-page-image {
@@ -27,9 +40,11 @@
 }
 
 .loading-page-return-btn {
-    margin-bottom: 64px;
+    position: absolute;
+    bottom: 64px;
     opacity: 0;
     transition: opacity 0.4s;
+    pointer-events: auto;
 
     &.is-show {
         opacity: 1;

diff --git a/packages/flat-components/tsconfig.json b/packages/flat-components/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
-    "jsx": "react-jsx",
+    "jsx": "react",
     "noUnusedLocals": false,
     "baseUrl": ".",
     "paths": {

diff --git a/web/flat-web/src/AppRoutes/AppRouteContainer.tsx b/web/flat-web/src/AppRoutes/AppRouteContainer.tsx
@@ -3,10 +3,11 @@ import React, { ComponentType, FC, useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { RouteComponentProps } from "react-router-dom";
 import { useIsomorphicLayoutEffect } from "react-use";
+import { LoadingPage } from "flat-components";
 import { PageStoreContext } from "../components/StoreProvider";
 import { RouteNameType } from "../route-config";
 import { AppRouteErrorBoundary } from "./AppRouteErrorBoundary";
-import { LoadingPage } from "flat-components";
+import { routePages } from "./route-pages";
 
 export interface AppRouteContainerProps {
     name: RouteNameType;
@@ -35,10 +36,12 @@ export const AppRouteContainer: FC<AppRouteContainerProps> = ({
         window.getSelection()?.removeAllRanges();
     }, [t, title]);
 
+    const hasHeader = pageStore.name && routePages[pageStore.name].hasHeader;
+
     return (
         <AppRouteErrorBoundary
             Comp={loadable(Comp, {
-                fallback: <LoadingPage />,
+                fallback: <LoadingPage hasHeader={hasHeader} />,
             })}
             {...{ title, routeProps }}
         />