From 10200a382787a7fd12a9a6f1f2fca648712c06e1 Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Wed, 17 Nov 2021 15:42:57 +0330
Subject: [PATCH] migrate About to Mui 5 (#105)

* migrate About to Mui 5

* rewrite with LoadingPlaceholder
---
 src/screens/settings/About.tsx | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx
index 7a35ab4c..52c81713 100644
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -1,26 +1,14 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { CircularProgress } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import client from '../../util/client';
-import ListItemLink from '../../components/util/ListItemLink';
-import NavbarContext from '../../components/context/NavbarContext';
-
-const useStyles = makeStyles({
-    loading: {
-        width: '100vw',
-        '& div': {
-            margin: '50px auto',
-            display: 'block',
-        },
-    },
-});
+import client from 'util/client';
+import ListItemLink from 'components/util/ListItemLink';
+import NavbarContext from 'components/context/NavbarContext';
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 
 export default function About() {
     const { setTitle, setAction } = useContext(NavbarContext);
-    const classes = useStyles();
 
     const [about, setAbout] = useState<IAbout>();
 
@@ -35,11 +23,7 @@ export default function About() {
     }, []);
 
     if (about === undefined) {
-        return (
-            <div className={classes.loading}>
-                <CircularProgress thickness={5} />
-            </div>
-        );
+        return <LoadingPlaceholder />;
     }
 
     const version = () => {