fade in all loading screens, update react-div-100vh, add transition to app bar

2025-12-28 16:06:41 +01:00 · 2021-09-06 23:05:11 +10:00
parent a63c298a41
commit 0a31a9a7f3
7 changed files with 148 additions and 128 deletions
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
    "react-beautiful-dnd": "^13.0.0",
    "react-color": "^2.17.3",
    "react-data-grid": "7.0.0-canary.30",
-    "react-div-100vh": "^0.3.8",
+    "react-div-100vh": "^0.6.0",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^17.0.2",
--- a/src/components/Auth/AuthLayout.tsx
+++ b/src/components/Auth/AuthLayout.tsx
@@ -1,95 +1,97 @@
-import Div100vh from "react-div-100vh";
+import { use100vh } from "react-div-100vh";

-import { makeStyles, createStyles } from "@material-ui/styles";
-import { Paper, Typography, LinearProgress } from "@material-ui/core";
+import { Box, Paper, Typography, LinearProgress } from "@material-ui/core";
 import { alpha } from "@material-ui/core/styles";

 import bgPattern from "assets/bg-pattern.svg";
 import Logo from "assets/Logo";

-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      backgroundBlendMode: "normal, overlay, normal, normal",
-      // backgroundImage: `
-      //   linear-gradient(to bottom, rgba(255,255,255,0), #fff),
-      //   linear-gradient(155deg, #303030 -4%, ${theme.palette.primary.main} 92%),
-      //   url('${bgPattern}'),
-      //   linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
-      // `,
-      backgroundImage: `
-        linear-gradient(to bottom, ${alpha(
-          theme.palette.background.default,
-          0
-        )}, ${theme.palette.background.default} 75%),
-        linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
-        theme.palette.secondary.main
-      } 90%),
-        url('${bgPattern}'),
-        linear-gradient(161deg, ${alpha(
-          theme.palette.background.default,
-          0.95
-        )} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
-      `,
-
-      display: "grid",
-      placeItems: "center",
-      padding: theme.spacing(1),
-
-      cursor: "default",
-    },
-
-    paper: {
-      position: "relative",
-      overflow: "hidden",
-
-      maxWidth: 400,
-      width: "100%",
-      padding: theme.spacing(4),
-      backgroundColor: theme.palette.background.paper,
-
-      "--spacing-contents": theme.spacing(4),
-      "& > * + *": { marginTop: "var(--spacing-contents)" },
-
-      textAlign: "center",
-    },
-
-    projectName: {
-      display: "block",
-      marginTop: theme.spacing(1),
-
-      color: theme.palette.text.disabled,
-    },
-
-    progress: {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      top: 0,
-      marginTop: 0,
-    },
-  })
-);
-
 export interface IAuthLayoutProps {
  children: React.ReactNode;
  loading?: boolean;
 }

 export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
-  const classes = useStyles();
+  const fullScreenHeight = use100vh() ?? "100vh";

  return (
-    <Div100vh className={classes.root} style={{ minHeight: "100rvh" }}>
-      <Paper className={classes.paper}>
+    <Box
+      sx={{
+        minHeight: fullScreenHeight,
+        backgroundBlendMode: "normal, overlay, normal, normal",
+        // backgroundImage: `
+        //   linear-gradient(to bottom, rgba(255,255,255,0), #fff),
+        //   linear-gradient(155deg, #303030 -4%, ${theme.palette.primary.main} 92%),
+        //   url('${bgPattern}'),
+        //   linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
+        // `,
+        backgroundImage: (theme) => `
+      linear-gradient(to bottom, ${alpha(
+        theme.palette.background.default,
+        0
+      )}, ${theme.palette.background.default} 75%),
+      linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
+          theme.palette.secondary.main
+        } 90%),
+      url('${bgPattern}'),
+      linear-gradient(161deg, ${alpha(
+        theme.palette.background.default,
+        0.95
+      )} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
+    `,
+
+        display: "grid",
+        placeItems: "center",
+        p: 1,
+
+        cursor: "default",
+      }}
+    >
+      <Paper
+        component="main"
+        sx={
+          {
+            position: "relative",
+            overflow: "hidden",
+
+            maxWidth: 400,
+            width: "100%",
+            p: 4,
+            bgcolor: "background.paper",
+
+            "--spacing-contents": (theme) => theme.spacing(4),
+            "& > * + *": { marginTop: "var(--spacing-contents)" },
+
+            textAlign: "center",
+          } as any
+        }
+      >
        <Logo />
-        <Typography variant="body2" className={classes.projectName}>
+        <Typography
+          variant="body2"
+          sx={{
+            display: "block",
+            mt: 1,
+
+            color: "text.disabled",
+          }}
+        >
          Project: {process.env.REACT_APP_FIREBASE_PROJECT_ID}
        </Typography>
        {children}

-        {loading && <LinearProgress className={classes.progress} />}
+        {loading && (
+          <LinearProgress
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              marginTop: 0,
+            }}
+          />
+        )}
      </Paper>
-    </Div100vh>
+    </Box>
  );
 }
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -1,4 +1,4 @@
-import Div100vh from "react-div-100vh";
+import { use100vh } from "react-div-100vh";

 import {
  Grid,
@@ -36,6 +36,8 @@ export default function EmptyState({
  basic = false,
  ...props
 }: IEmptyStateProps) {
+  const fullScreenHeight = use100vh() ?? "100vh";
+
  if (basic)
    return (
      <Grid container alignItems="center" spacing={1} {...props}>
@@ -57,11 +59,10 @@ export default function EmptyState({
      direction="column"
      justifyContent="center"
      alignItems="center"
-      component={fullScreen ? Div100vh : "div"}
      {...props}
      style={{
        width: "100%",
-        height: fullScreen ? "100rvh" : "100%",
+        height: fullScreen ? fullScreenHeight : "100%",
        textAlign: "center",
        ...props.style,
      }}
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,6 +1,12 @@
-import Div100vh from "react-div-100vh";
+import { use100vh } from "react-div-100vh";

-import { Stack, StackProps,CircularProgress, Typography } from "@material-ui/core";
+import {
+  Fade,
+  Stack,
+  StackProps,
+  CircularProgress,
+  Typography,
+} from "@material-ui/core";
 interface ILoadingProps extends Partial<StackProps> {
  message?: string;
  fullScreen?: boolean;
@@ -11,23 +17,26 @@ export default function Loading({
  fullScreen = false,
  ...props
 }: ILoadingProps) {
+  const fullScreenHeight = use100vh() ?? "100vh";
+
  return (
-    <Stack
-      justifyContent="center"
-      alignItems="center"
-      component={fullScreen ? Div100vh : "div"}
-      {...props}
-      style={{
-        width: "100%",
-        height: fullScreen ? "100rvh" : "100%",
-        alignItems: "center",
-        ...props.style,
-      }}
-    >
-      <CircularProgress sx={{ color: "action.active", mb: 1 }} />
-      <Typography variant="h6" component="div" style={{ userSelect: "none" }}>
-        {message}
-      </Typography>
-    </Stack>
+    <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        {...props}
+        style={{
+          width: "100%",
+          height: fullScreen ? fullScreenHeight : "100%",
+          alignItems: "center",
+          ...props.style,
+        }}
+      >
+        <CircularProgress sx={{ color: "action.active", mb: 1 }} />
+        <Typography variant="h6" component="div" style={{ userSelect: "none" }}>
+          {message}
+        </Typography>
+      </Stack>
+    </Fade>
  );
 }
--- a/src/components/Navigation/UserMenu.tsx
+++ b/src/components/Navigation/UserMenu.tsx
@@ -12,6 +12,7 @@ import {
  ListItemText,
  ListItemSecondaryAction,
  Divider,
+  Grow,
 } from "@material-ui/core";
 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
 import ArrowRightIcon from "@material-ui/icons/ArrowRight";
@@ -69,19 +70,21 @@ export default function UserMenu(props: IconButtonProps) {

  return (
    <>
-      <IconButton
-        aria-label="Open user menu"
-        aria-controls="user-menu"
-        aria-haspopup="true"
-        edge="end"
-        size="large"
-        {...props}
-        ref={anchorEl}
-        onClick={() => setOpen(true)}
-        sx={{ "& .MuiAvatar-root": { width: 24, height: 24 } }}
-      >
-        {avatar}
-      </IconButton>
+      <Grow in>
+        <IconButton
+          aria-label="Open user menu"
+          aria-controls="user-menu"
+          aria-haspopup="true"
+          edge="end"
+          size="large"
+          {...props}
+          ref={anchorEl}
+          onClick={() => setOpen(true)}
+          sx={{ "& .MuiAvatar-root": { width: 24, height: 24 } }}
+        >
+          {avatar}
+        </IconButton>
+      </Grow>

      <Menu
        anchorEl={anchorEl.current}
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Navigation/index.tsx
@@ -7,6 +7,7 @@ import {
  IconButton,
  Box,
  Typography,
+  Grow,
 } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";

@@ -77,22 +78,26 @@ export default function Navigation({
            },
          }}
        >
-          <IconButton
-            aria-label="Open navigation drawer"
-            onClick={() => setOpen(true)}
-            size="large"
-            edge="start"
-          >
-            <MenuIcon />
-          </IconButton>
+          <Grow in>
+            <IconButton
+              aria-label="Open navigation drawer"
+              onClick={() => setOpen(true)}
+              size="large"
+              edge="start"
+            >
+              <MenuIcon />
+            </IconButton>
+          </Grow>

-          <Box sx={{ flex: 1, userSelect: "none" }}>
-            {titleComponent || (
-              <Typography variant="h6" component="h1" textAlign="center">
-                {title}
-              </Typography>
-            )}
-          </Box>
+          <Grow in key={title}>
+            <Box sx={{ flex: 1, userSelect: "none" }}>
+              {titleComponent || (
+                <Typography variant="h6" component="h1" textAlign="center">
+                  {title}
+                </Typography>
+              )}
+            </Box>
+          </Grow>

          <UserMenu />
          {/* <Notifications /> */}
--- a/yarn.lock
+++ b/yarn.lock
@@ -13464,10 +13464,10 @@ react-dev-utils@^11.0.3:
    strip-ansi "6.0.0"
    text-table "0.2.0"

-react-div-100vh@^0.3.8:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.3.8.tgz#54e4c32d0286a65e92367fc0a07cc3f2f00739d8"
-  integrity sha512-1kDFW+HXYpfac1tfJ4BcQmgTSeTtLVs2FO2ZNHcwLIga+oVluexUEISCBJvr9xq98DK8tcygY3259EvIy5O+3g==
+react-div-100vh@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.6.0.tgz#577972d8ac17693edcd44061c1a4b5a7578e49ec"
+  integrity sha512-ErV0VTNXUd8jZqofC0ExZr5u+XDD2kN2te4SbwtqsyTm0UOjVYu53kP+FalGQrTe+DoMG8VYR2dITcAFu7c/5w==

 react-dnd-html5-backend@^11.1.3:
  version "11.1.3"