fix the ugliness of bare messages

- replace "loading..." messages with LoadingPlaceholder
- Use EmptyView where appropriate

src/components/EmptyView.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+// adopted from: https://github.com/tachiyomiorg/tachiyomi/blob/master/app/src/main/java/eu/kanade/tachiyomi/widget/EmptyView.kt
+
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import { useMediaQuery } from '@mui/material';
+
+const ERROR_FACES = [
+    '(･o･;)',
+    'Σ(ಠ_ಠ)',
+    'ಥ_ಥ',
+    '(˘･_･˘)',
+    '(；￣Д￣)',
+    '(･Д･。',
+];
+
+function getRandomErrorFace() {
+    const randIndex = Math.floor(Math.random() * ERROR_FACES.length);
+    return ERROR_FACES[randIndex];
+}
+
+interface IProps {
+    message: string
+    messageExtra?: JSX.Element
+}
+
+export default function EmptyView({ message, messageExtra }: IProps) {
+    const theme = useTheme();
+    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
+
+    return (
+        <div style={{
+            position: 'absolute',
+            left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+            textAlign: 'center',
+        }}
+        >
+            <Typography variant="h3" gutterBottom>
+                {getRandomErrorFace()}
+            </Typography>
+            <Typography variant="h5">
+                {message}
+            </Typography>
+            {messageExtra}
+        </div>
+    );
+}
+
+EmptyView.defaultProps = {
+    messageExtra: undefined,
+};

src/components/LoadingPlaceholder.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles({
 });
 
 interface IProps {
-    shouldRender: boolean | (() => boolean)
+    shouldRender?: boolean | (() => boolean)
     children?: React.ReactNode
     component?: string | React.FunctionComponent<any> | React.ComponentClass<any, any>
     componentProps?: any
@@ -32,7 +32,10 @@ export default function LoadingPlaceholder(props: IProps) {
     } = props;
     const classes = useStyles();
 
-    const condition = shouldRender instanceof Function ? shouldRender() : shouldRender;
+    let condition = true;
+    if (shouldRender !== undefined) {
+        condition = shouldRender instanceof Function ? shouldRender() : shouldRender;
+    }
 
     if (condition) {
         if (component) {

src/components/manga/MangaGrid.tsx

@@ -7,10 +7,13 @@
 
 import React, { useEffect, useRef } from 'react';
 import Grid from '@mui/material/Grid';
+import EmptyView from 'components/EmptyView';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import MangaCard from './MangaCard';
 
 interface IProps{
     mangas: IMangaCard[]
+    isLoading: boolean
     message?: string
     messageExtra?: JSX.Element
     hasNextPage: boolean
@@ -20,7 +23,7 @@ interface IProps{
 
 export default function MangaGrid(props: IProps) {
     const {
-        mangas, message, messageExtra, hasNextPage, lastPageNum, setLastPageNum,
+        mangas, isLoading, message, messageExtra, hasNextPage, lastPageNum, setLastPageNum,
     } = props;
     let mapped;
     const lastManga = useRef<HTMLDivElement>(null);
@@ -41,12 +44,15 @@ export default function MangaGrid(props: IProps) {
     }, [hasNextPage, mangas]);
 
     if (mangas.length === 0) {
-        mapped = (
-            <div>
-                <h3>{message}</h3>
-                {messageExtra}
-            </div>
-        );
+        if (isLoading) {
+            mapped = (
+                <LoadingPlaceholder />
+            );
+        } else {
+            mapped = (
+                <EmptyView message={message!} messageExtra={messageExtra} />
+            );
+        }
     } else {
         mapped = mangas.map((it, idx) => {
             if (idx === mangas.length - 1) {
@@ -75,6 +81,6 @@ export default function MangaGrid(props: IProps) {
 }
 
 MangaGrid.defaultProps = {
-    message: 'loading...',
+    message: '',
     messageExtra: undefined,
 };

src/components/navbar/NavBar.tsx

@@ -20,10 +20,10 @@ import ExtensionIcon from '@mui/icons-material/Extension';
 import ExploreIcon from '@mui/icons-material/Explore';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import SettingsIcon from '@mui/icons-material/Settings';
-import TemporaryDrawer from 'components/TemporaryDrawer';
-import NavBarContext from '../../context/NavbarContext';
-import DarkTheme from '../../context/DarkTheme';
+import NavBarContext from 'context/NavbarContext';
+import DarkTheme from 'context/DarkTheme';
 import PermanentSideBar from './PermanentSideBar';
+import TemporaryDrawer from './TemporaryDrawer';
 
 const useStyles = makeStyles((theme) => ({
     root: {