fix the ugliness of bare messages

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

src/screens/manga/Extensions.tsx

@@ -16,6 +16,7 @@ import useLocalStorage from 'util/useLocalStorage';
 import LangSelect from 'components/manga/LangSelect';
 import { extensionDefaultLangs, langCodeToName, langSortCmp } from 'util/language';
 import { makeToaster } from 'components/Toast';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 
 const allLangs: string[] = [];
 
@@ -145,7 +146,7 @@ export default function MangaExtensions() {
     }, [extensions]); // useEffect only after <input> renders
 
     if (Object.entries(extensions).length === 0) {
-        return <h3>loading...</h3>;
+        return <LoadingPlaceholder />;
     }
     const groupsToShow = ['updates pending', 'installed', ...shownLangs];
     return (

src/screens/manga/Library.tsx

@@ -11,6 +11,8 @@ import MangaGrid from 'components/manga/MangaGrid';
 import NavbarContext from 'context/NavbarContext';
 import client from 'util/client';
 import cloneObject from 'util/cloneObject';
+import EmptyView from 'components/EmptyView';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 
 interface IMangaCategory {
     category: ICategory
@@ -93,11 +95,11 @@ export default function Library() {
     }, [tabs?.length, tabNum]);
 
     if (tabs === undefined) {
-        return <h3>Loading...</h3>;
+        return <LoadingPlaceholder />;
     }
 
     if (tabs.length === 0) {
-        return <h3>Library is empty</h3>;
+        return <EmptyView message="Your Library is empty" />;
     }
 
     let toRender;
@@ -112,7 +114,8 @@ export default function Library() {
                     hasNextPage={false}
                     lastPageNum={lastPageNum}
                     setLastPageNum={setLastPageNum}
-                    message={tab.isFetched ? 'Category is Empty' : 'Loading...'}
+                    message="Category is Empty"
+                    isLoading={!tab.isFetched}
                 />
             </TabPanel>
         ));
@@ -145,7 +148,8 @@ export default function Library() {
                 hasNextPage={false}
                 lastPageNum={lastPageNum}
                 setLastPageNum={setLastPageNum}
-                message={tabs.length > 0 ? 'Library is Empty' : undefined}
+                message="Your Library is empty"
+                isLoading={!tabs[0].isFetched}
             />
         );
     }

src/screens/manga/SearchSingle.tsx

@@ -39,6 +39,7 @@ export default function SearchSingle() {
     const [searchTerm, setSearchTerm] = useState<string>('');
     const [hasNextPage, setHasNextPage] = useState<boolean>(false);
     const [lastPageNum, setLastPageNum] = useState<number>(1);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const textInput = React.createRef<HTMLInputElement>();
 
@@ -53,22 +54,23 @@ export default function SearchSingle() {
             const { value } = textInput.current;
             if (value === '') {
                 setError(true);
-                setMessage('Type something to search');
-            } else {
+            } else if (value !== searchTerm) {
                 setError(false);
                 setSearchTerm(value);
                 setMangas([]);
-                setMessage('loading...');
             }
         }
     }
 
     useEffect(() => {
         if (searchTerm.length > 0) {
+            setIsLoading(true);
+
             client.get(`/api/v1/source/${sourceId}/search/${searchTerm}/${lastPageNum}`)
                 .then((response) => response.data)
                 .then((data: { mangaList: IManga[], hasNextPage: boolean }) => {
                     setMessage('');
+
                     if (data.mangaList.length > 0) {
                         setMangas([
                             ...mangas,
@@ -77,22 +79,14 @@ export default function SearchSingle() {
                             }))]);
                         setHasNextPage(data.hasNextPage);
                     } else {
-                        setMessage('search query returned nothing.');
+                        setMessage('Search query returned nothing.');
                     }
+
+                    setIsLoading(false);
                 });
         }
     }, [searchTerm]);
 
-    const mangaGrid = (
-        <MangaGrid
-            mangas={mangas}
-            message={message}
-            hasNextPage={hasNextPage}
-            lastPageNum={lastPageNum}
-            setLastPageNum={setLastPageNum}
-        />
-    );
-
     return (
         <>
             <div className={classes.root}>
@@ -109,7 +103,17 @@ export default function SearchSingle() {
                     Search
                 </Button>
             </div>
-            {mangaGrid}
+            {searchTerm.length > 0
+        && (
+            <MangaGrid
+                mangas={mangas}
+                message={message}
+                hasNextPage={hasNextPage}
+                lastPageNum={lastPageNum}
+                setLastPageNum={setLastPageNum}
+                isLoading={isLoading}
+            />
+        )}
         </>
     );
 }

src/screens/manga/SourceMangas.tsx

@@ -93,6 +93,7 @@ export default function SourceMangas(props: { popular: boolean }) {
             setLastPageNum={setLastPageNum}
             message={message}
             messageExtra={messageExtra}
+            isLoading={!fetched}
         />
     );
 }

src/screens/manga/Sources.tsx

@@ -14,6 +14,7 @@ import {
     sourceDefualtLangs, sourceForcedDefaultLangs, langCodeToName, langSortCmp,
 } from 'util/language';
 import useLocalStorage from 'util/useLocalStorage';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 
 function sourceToLangList(sources: ISource[]) {
     const result: string[] = [];
@@ -81,7 +82,7 @@ export default function MangaSources() {
 
     if (sources.length === 0) {
         if (fetched) return (<h3>No sources found. Install Some Extensions first.</h3>);
-        return (<h3>loading...</h3>);
+        return <LoadingPlaceholder />;
     }
     return (
         <>