add loading all page & change bugs

app/component/loading/Circular.js

@@ -0,0 +1,13 @@
+import { Skeleton } from '@mui/material'
+
+function CircularLoading({ loading, width, height, children }) {
+    return loading ? (
+        <Skeleton
+            variant="circular"
+            height={height}
+            width={width}
+        />
+    ) : children
+}
+
+export default CircularLoading

app/component/loading/Custom.js

@@ -0,0 +1,14 @@
+import { Skeleton } from "@mui/material"
+
+function CustomLoading({ width, height, children, loading }) {
+    return loading ? (
+        <Skeleton
+            className={width === 'full' ? '!w-full' : ''}
+            height={height}
+            variant="rounded"
+            width={width}
+        />
+    ) : children
+}
+
+export default CustomLoading

app/component/loading/Multiline.js

@@ -0,0 +1,14 @@
+import { Skeleton } from "@mui/material"
+
+function MultilineLoading({ loading, width, height, children, line }) {
+    return loading ? Array(line).fill({}).map(_ => (
+        <Skeleton
+            className={`${width === 'full' ? '!w-full' : ''} !my-2`}
+            variant="rounded"
+            height={height}
+            width={width}
+        />
+    )) : children
+}
+
+export default MultilineLoading

app/component/loading/Text.js

@@ -0,0 +1,14 @@
+import { Skeleton } from '@mui/material'
+
+function TextLoading({ loading, width, height, children }) {
+    return loading ? (
+        <Skeleton
+            className={width === 'full' ? '!w-full' : ''}
+            variant="rounded"
+            height={height}
+            width={width}
+        />
+    ) : children
+}
+
+export default TextLoading