From 624625c77b4c46848d3e929e42c0c92ddcd2def2 Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Mon, 15 Nov 2021 18:13:57 +0330
Subject: [PATCH] migrate LoadingPlaceholder to Mui 5

---
 src/components/util/LoadingPlaceholder.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/util/LoadingPlaceholder.tsx b/src/components/util/LoadingPlaceholder.tsx
index 1a2412e919..5985fa7b22 100644
--- a/src/components/util/LoadingPlaceholder.tsx
+++ b/src/components/util/LoadingPlaceholder.tsx
@@ -8,16 +8,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import CircularProgress from '@mui/material/CircularProgress';
-
-const useStyles = makeStyles({
-    loading: {
-        margin: '10px auto',
-        display: 'flex',
-        justifyContent: 'center',
-    },
-});
+import { Box } from '@mui/system';
 
 interface IProps {
     shouldRender?: boolean | (() => boolean)
@@ -30,7 +22,6 @@ export default function LoadingPlaceholder(props: IProps) {
     const {
         children, shouldRender, component, componentProps,
     } = props;
-    const classes = useStyles();
 
     let condition = true;
     if (shouldRender !== undefined) {
@@ -52,8 +43,13 @@ export default function LoadingPlaceholder(props: IProps) {
     }
 
     return (
-        <div className={classes.loading}>
+        <Box sx={{
+            margin: '10px auto',
+            display: 'flex',
+            justifyContent: 'center',
+        }}
+        >
             <CircularProgress thickness={5} />
-        </div>
+        </Box>
     );
 }