migrate About to Mui 5 (#105)

* migrate About to Mui 5

* rewrite with LoadingPlaceholder

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 client from 'util/client';
-import ListItemLink from '../../components/util/ListItemLink';
+import ListItemLink from 'components/util/ListItemLink';
-import NavbarContext from '../../components/context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
-
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-const useStyles = makeStyles({
-    loading: {
-        width: '100vw',
-        '& div': {
-            margin: '50px auto',
-            display: 'block',
-        },
-    },
-});
 
 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 (
+        return <LoadingPlaceholder />;
-            <div className={classes.loading}>
-                <CircularProgress thickness={5} />
-            </div>
-        );
     }
 
     const version = () => {