feat: b3 loading component

apps/storefront/src/components/index.ts

@@ -84,4 +84,5 @@ export {
 export {
   B3PageMask,
   showPageMask,
-} from './pageMask/B3PageMask'
+  Loading,
+} from './loadding'

apps/storefront/src/components/layout/B3RenderRouter.tsx

@@ -6,10 +6,6 @@ import {
   useEffect,
 } from 'react'
 
-import {
-  Box,
-} from '@mui/material'
-
 import {
   Route,
   Routes,
@@ -24,6 +20,7 @@ import type {
 
 import {
   B3Layout,
+  Loading,
 } from '@/components'
 import {
   RegisteredProvider,
@@ -86,17 +83,9 @@ export const B3RenderRouter = (props: B3RenderRouterProps) => {
   }, [openUrl])
 
   return (
-    <Suspense fallback={(
-      <Box sx={{
-        display: 'flex',
-        width: '100%',
-        height: '100vh',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-      >
-        Loading...
-      </Box>
+    <Suspense
+      fallback={(
+        <Loading />
       )}
     >
       <B3LayoutTip />

apps/storefront/src/components/loadding/B3PageMask.tsx

@@ -0,0 +1,40 @@
+import {
+  useContext,
+} from 'react'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  DispatchProps,
+} from '@/shared/global/context/config'
+
+import Loading from './Loading'
+
+export const B3PageMask = () => {
+  const {
+    state: {
+      showPageMask,
+    },
+  } = useContext(GlobaledContext)
+
+  return (
+    <>
+      {
+        showPageMask && (
+          <Loading />
+        )
+      }
+    </>
+  )
+}
+
+export const showPageMask = (dispatch: DispatchProps, isShow: boolean) => {
+  dispatch({
+    type: 'common',
+    payload: {
+      showPageMask: isShow,
+    },
+  })
+}

apps/storefront/src/components/loadding/Loading.tsx

@@ -0,0 +1,35 @@
+import {
+  Box,
+  Typography,
+} from '@mui/material'
+
+const Loading = () => (
+  <Box
+    sx={{
+      width: '100%',
+      height: '100%',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      backgroundColor: '#fef9f5',
+      zIndex: 120000,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Typography
+      sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        color: 'black',
+      }}
+    >
+      Loading...
+    </Typography>
+  </Box>
+)
+
+export default Loading

apps/storefront/src/components/loadding/index.ts

@@ -0,0 +1,10 @@
+import Loading from './Loading'
+
+export {
+  B3PageMask,
+  showPageMask,
+} from './B3PageMask'
+
+export {
+  Loading,
+}