Loading placeholder & css fixes

webUI/react/src/components/LoadingPlaceholder.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/require-default-props */
+/*
+ * 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/. */
+
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles({
+    loading: {
+        margin: '10px 0',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+});
+
+interface IProps {
+    shouldRender: boolean | (() => boolean)
+    children?: React.ReactNode
+    component?: string | React.FunctionComponent<any> | React.ComponentClass<any, any>
+    componentProps?: any
+}
+
+export default function LoadingPlaceholder(props: IProps) {
+    const {
+        children, shouldRender, component, componentProps,
+    } = props;
+    const classes = useStyles();
+
+    const condition = shouldRender instanceof Function ? shouldRender() : shouldRender;
+
+    if (condition) {
+        if (component) {
+            return React.createElement(component, componentProps);
+        }
+
+        if (children) {
+            return (
+                <>
+                    {children}
+                </>
+            );
+        }
+    }
+
+    return (
+        <div className={classes.loading}>
+            <CircularProgress thickness={5} />
+        </div>
+    );
+}

webUI/react/src/components/MangaDetails.tsx

@@ -22,8 +22,13 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
     root: {
         width: '100%',
         [theme.breakpoints.up('md')]: {
-            position: 'fixed',
+            position: 'sticky',
+            top: '64px',
+            left: '0px',
             width: '50vw',
+            height: 'calc(100vh - 64px)',
+            alignSelf: 'flex-start',
+            overflowY: 'auto',
         },
     },
     top: {

webUI/react/src/screens/Manga.tsx

@@ -14,6 +14,7 @@ import ChapterCard from '../components/ChapterCard';
 import MangaDetails from '../components/MangaDetails';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
+import LoadingPlaceholder from '../components/LoadingPlaceholder';
 
 const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -26,8 +27,10 @@ const useStyles = makeStyles((theme: Theme) => ({
         listStyle: 'none',
         padding: 0,
         [theme.breakpoints.up('md')]: {
-            width: '50%',
-            marginLeft: '50%',
+            width: '50vw',
+            height: 'calc(100vh - 64px)',
+            overflowY: 'auto',
+            margin: 0,
         },
     },
 
@@ -65,20 +68,23 @@ export default function Manga() {
     }, []);
 
     const chapterCards = (
-        <ol className={classes.chapters}>
-            {chapters.length === 0
-            && (
-                <div className={classes.loading}>
-                    <CircularProgress thickness={5} />
-                </div>
-            ) }
-            {chapters.map((chapter) => (<ChapterCard chapter={chapter} />))}
-        </ol>
+        <LoadingPlaceholder
+            shouldRender
+        >
+            <ol className={classes.chapters}>
+                {chapters.map((chapter) => (<ChapterCard chapter={chapter} />))}
+            </ol>
+        </LoadingPlaceholder>
+
     );
 
     return (
         <div className={classes.root}>
-            {manga && <MangaDetails manga={manga} />}
+            <LoadingPlaceholder
+                shouldRender={manga !== undefined}
+                component={MangaDetails}
+                componentProps={{ manga }}
+            />
             {chapterCards}
         </div>
     );