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: {