Rename LoadingMask to FullscreenLoadingMask

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { getRouter } from '@/router'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 export const AppContext = createContext<{ refreshRouter: () => void }>({
     refreshRouter: () => undefined
@@ -18,7 +18,7 @@ const App: React.FC = () => {
                     }
                 }}
             >
-                <Suspense fallback={<LoadingMask />}>
+                <Suspense fallback={<FullscreenLoadingMask />}>
                     <RouterProvider router={routerState} />
                 </Suspense>
             </AppContext.Provider>

src/assets/css/components/common/fullscreen-loading-mask.scss

@@ -0,0 +1,10 @@
+.fullscreen-loading-mask {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(200, 200, 200, 0.2);
+}

src/components/common/FullscreenLoadingMask.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/loading-mask.scss'
+import '@/assets/css/components/common/fullscreen-loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import FitFullScreen from '@/components/common/FitFullScreen'
 
-const LoadingMask: React.FC = () => {
+const FullscreenLoadingMask: React.FC = () => {
     const loadingIcon = (
         <>
             <Icon
@@ -17,7 +17,7 @@ const LoadingMask: React.FC = () => {
     return (
         <>
             <FitFullScreen>
-                <div className={'loading-mask'}>
+                <div className={'fullscreen-loading-mask'}>
                     <AntdSpin indicator={loadingIcon} />
                 </div>
             </FitFullScreen>
@@ -25,4 +25,4 @@ const LoadingMask: React.FC = () => {
     )
 }
 
-export default LoadingMask
+export default FullscreenLoadingMask

src/pages/HomeFramework.tsx

@@ -3,7 +3,7 @@ import Icon from '@ant-design/icons'
 import '@/assets/css/pages/home-framework.scss'
 import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 import { getRouter } from '@/router'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
 export const HomeFrameworkContext = createContext<{
@@ -206,7 +206,7 @@ const HomeFramework: React.FC = () => {
                         <Suspense
                             fallback={
                                 <>
-                                    <LoadingMask />
+                                    <FullscreenLoadingMask />
                                 </>
                             }
                         >

src/pages/SystemFramework.tsx

@@ -5,7 +5,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const SystemFramework: React.FC = () => {
     return (
@@ -32,7 +32,7 @@ const SystemFramework: React.FC = () => {
                     <Suspense
                         fallback={
                             <>
-                                <LoadingMask />
+                                <FullscreenLoadingMask />
                             </>
                         }
                     >

src/pages/ToolsFramework.tsx

@@ -7,7 +7,7 @@ import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
 import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
     const sidebarScrollRef = useRef<SidebarScrollElement>(null)
@@ -67,7 +67,7 @@ const ToolsFramework: React.FC = () => {
                     <Suspense
                         fallback={
                             <>
-                                <LoadingMask />
+                                <FullscreenLoadingMask />
                             </>
                         }
                     >

src/pages/UserFramework.tsx

@@ -6,7 +6,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
     return (
@@ -46,7 +46,7 @@ const ToolsFramework: React.FC = () => {
                     <Suspense
                         fallback={
                             <>
-                                <LoadingMask />
+                                <FullscreenLoadingMask />
                             </>
                         }
                     >

src/router/index.tsx

@@ -22,7 +22,7 @@ const root: RouteJsonObject[] = [
                 path: 'loading',
                 absolutePath: '/loading',
                 id: 'loading',
-                component: React.lazy(() => import('@/components/common/LoadingMask'))
+                component: React.lazy(() => import('@/components/common/FullscreenLoadingMask'))
             },
             {
                 path: 'tools',

src/util/common.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 export const randomInt = (start: number, end: number) => {
     if (start > end) {
@@ -46,7 +46,7 @@ export const showLoadingMask = (id: string) => {
         'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
     )
 
-    return ReactDOM.createRoot(container).render(<LoadingMask />)
+    return ReactDOM.createRoot(container).render(<FullscreenLoadingMask />)
 }
 
 export const removeLoadingMask = (id: string) => {