From 550033284831973a461488562cce24c6ef33402a Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Fri, 10 Sep 2021 14:26:32 +1000
Subject: [PATCH] fix skeletons & transitions

---
 src/components/Loading.tsx                    |   2 +-
 src/components/Navigation/index.tsx           |   6 +-
 .../Table/Skeleton/HeaderRowSkeleton.tsx      |  64 ++++++-----
 .../Table/Skeleton/TableHeaderSkeleton.tsx    |  69 ++++++------
 src/components/Table/TableHeader/index.tsx    | 101 +++++++++---------
 src/pages/Home.tsx                            |   2 +-
 src/pages/Settings/ProjectSettings.tsx        |   2 +-
 src/pages/Settings/UserManagement.tsx         |   2 +-
 src/pages/Settings/UserSettings.tsx           |   2 +-
 src/pages/Table.tsx                           |   1 +
 10 files changed, 139 insertions(+), 112 deletions(-)

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index e672cac2..d0e94ba2 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -20,7 +20,7 @@ export default function Loading({
   const fullScreenHeight = use100vh() ?? "100vh";
 
   return (
-    <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+    <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
       <Stack
         justifyContent="center"
         alignItems="center"
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
index c5f55cbf..c364eeb3 100644
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Navigation/index.tsx
@@ -7,7 +7,7 @@ import {
   IconButton,
   Box,
   Typography,
-  Grow,
+  Grow,GrowProps
 } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
 
@@ -26,6 +26,7 @@ export interface INavigationProps {
   title: string;
   titleComponent?: ReactNode;
   currentSection?: string;
+  titleTransitionProps?:Partial<GrowProps>
 }
 
 export default function Navigation({
@@ -33,6 +34,7 @@ export default function Navigation({
   title,
   titleComponent,
   currentSection,
+  titleTransitionProps,
 }: INavigationProps) {
   const [open, setOpen] = useState(false);
   const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });
@@ -91,7 +93,7 @@ export default function Navigation({
             </IconButton>
           </Grow>
 
-          <Grow in key={title}>
+          <Grow in key={title} {...titleTransitionProps}>
             <Box sx={{ flex: 1, overflowX: "auto", userSelect: "none" }}>
               {titleComponent || (
                 <Typography
diff --git a/src/components/Table/Skeleton/HeaderRowSkeleton.tsx b/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
index b1d14b2f..b07a8beb 100644
--- a/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
+++ b/src/components/Table/Skeleton/HeaderRowSkeleton.tsx
@@ -1,34 +1,48 @@
-import { Stack, Skeleton, Button } from "@material-ui/core";
+import { Fade, Stack, Skeleton, Button } from "@material-ui/core";
 import AddColumnIcon from "assets/icons/AddColumn";
 
 const NUM_CELLS = 5;
 
 export default function HeaderRowSkeleton() {
   return (
-    <Stack direction="row" alignItems="center">
-      {new Array(NUM_CELLS + 1).fill(undefined).map((_, i) => (
-        <Skeleton
-          key={i}
-          variant="rectangular"
-          sx={{
-            bgcolor: "background.default",
-            border: "1px solid",
-            borderColor: "divider",
-            borderLeftWidth: 0,
-            width: i === NUM_CELLS ? 46 : 150,
-            height: 44,
-            borderRadius: i === NUM_CELLS ? 1 : 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          }}
-        />
-      ))}
+    <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
+      <Stack
+        direction="row"
+        alignItems="center"
+        sx={{
+          marginLeft: (theme) =>
+            `max(env(safe-area-inset-left), ${theme.spacing(2)})`,
+          marginRight: `env(safe-area-inset-right)`,
+        }}
+      >
+        {new Array(NUM_CELLS + 1).fill(undefined).map((_, i) => (
+          <Skeleton
+            key={i}
+            variant="rectangular"
+            sx={{
+              bgcolor: "background.default",
+              border: "1px solid",
+              borderColor: "divider",
+              borderLeftWidth: i === 0 ? 1 : 0,
+              width: i === NUM_CELLS ? 46 : 150,
+              height: 44,
+              borderRadius: i === NUM_CELLS ? 1 : 0,
+              borderTopLeftRadius:
+                i === 0 ? (theme) => theme.shape.borderRadius : 0,
+              borderBottomLeftRadius:
+                i === 0 ? (theme) => theme.shape.borderRadius : 0,
+            }}
+          />
+        ))}
 
-      <Skeleton sx={{ transform: "none", ml: (-46 + 6) / 8, borderRadius: 1 }}>
-        <Button variant="contained" startIcon={<AddColumnIcon />}>
-          Add Column
-        </Button>
-      </Skeleton>
-    </Stack>
+        <Skeleton
+          sx={{ transform: "none", ml: (-46 + 6) / 8, borderRadius: 1 }}
+        >
+          <Button variant="contained" startIcon={<AddColumnIcon />}>
+            Add Column
+          </Button>
+        </Skeleton>
+      </Stack>
+    </Fade>
   );
 }
diff --git a/src/components/Table/Skeleton/TableHeaderSkeleton.tsx b/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
index 0ea3946c..2076b91e 100644
--- a/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
+++ b/src/components/Table/Skeleton/TableHeaderSkeleton.tsx
@@ -1,4 +1,4 @@
-import { Stack, Button } from "@material-ui/core";
+import { Fade, Stack, Button } from "@material-ui/core";
 import Skeleton from "@material-ui/core/Skeleton";
 import AddRowIcon from "assets/icons/AddRow";
 
@@ -10,39 +10,46 @@ const ButtonSkeleton = (props) => (
 
 export default function TableHeaderSkeleton() {
   return (
-    <Stack
-      direction="row"
-      alignItems="center"
-      spacing={1}
-      sx={{ pl: 2, pr: 2, pb: 1.5, height: TABLE_HEADER_HEIGHT }}
-    >
-      <ButtonSkeleton>
-        <Button variant="contained" startIcon={<AddRowIcon />}>
-          Add Row
-        </Button>
-      </ButtonSkeleton>
+    <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        sx={{
+          ml: "env(safe-area-inset-left)",
+          mr: "env(safe-area-inset-right)",
+          pl: 2,
+          pr: 2,
+          pb: 1.5,
+          height: TABLE_HEADER_HEIGHT,
+        }}
+      >
+        <ButtonSkeleton>
+          <Button variant="contained" startIcon={<AddRowIcon />}>
+            Add Row
+          </Button>
+        </ButtonSkeleton>
 
-      <div />
+        <div />
 
-      <ButtonSkeleton>
-        <Button variant="contained" startIcon={<AddRowIcon />}>
-          Hide
-        </Button>
-      </ButtonSkeleton>
-      <ButtonSkeleton>
-        <Button variant="contained" startIcon={<AddRowIcon />}>
-          Filter
-        </Button>
-      </ButtonSkeleton>
+        <ButtonSkeleton>
+          <Button variant="contained" startIcon={<AddRowIcon />}>
+            Hide
+          </Button>
+        </ButtonSkeleton>
+        <ButtonSkeleton>
+          <Button variant="contained" startIcon={<AddRowIcon />}>
+            Filter
+          </Button>
+        </ButtonSkeleton>
 
-      <div style={{ flexGrow: 1 }} />
+        <div style={{ flexGrow: 1 }} />
 
-      <ButtonSkeleton style={{ width: 40, height: 32 }} />
-      <div />
-      <ButtonSkeleton style={{ width: 40, height: 32 }} />
-      <ButtonSkeleton style={{ width: 40, height: 32 }} />
-      <div />
-      <ButtonSkeleton style={{ width: 40, height: 32 }} />
-    </Stack>
+        <ButtonSkeleton style={{ width: 40, height: 32 }} />
+        <div />
+        <ButtonSkeleton style={{ width: 40, height: 32 }} />
+        <ButtonSkeleton style={{ width: 40, height: 32 }} />
+      </Stack>
+    </Fade>
   );
 }
diff --git a/src/components/Table/TableHeader/index.tsx b/src/components/Table/TableHeader/index.tsx
index 08e8e1ba..702ea22a 100644
--- a/src/components/Table/TableHeader/index.tsx
+++ b/src/components/Table/TableHeader/index.tsx
@@ -53,58 +53,61 @@ export default function TableHeader() {
         "& > *": { flexShrink: 0 },
       }}
     >
-      {!isCollectionGroup() && (
-        /* <ButtonGroup
-            variant="contained"
-            aria-label="Split button"
-            style={{ display: "flex" }}
-          > */
+      {/*
+      <ButtonGroup
+        variant="contained"
+        aria-label="Split button"
+        style={{ display: "flex" }}
+      >
+        */}
+      <Button
+        disabled={isCollectionGroup()}
+        onClick={() => {
+          const requiredFields = Object.values(columns)
+            .map((column) => {
+              if (column.config.required) {
+                return column.key;
+              }
+            })
+            .filter((c) => c);
+          const initialVal = Object.values(columns).reduce((acc, column) => {
+            if (column.config?.defaultValue?.type === "static") {
+              return {
+                ...acc,
+                [column.key]: column.config.defaultValue.value,
+              };
+            } else if (column.config?.defaultValue?.type === "null") {
+              return { ...acc, [column.key]: null };
+            } else return acc;
+          }, {});
+          tableActions?.row.add(
+            {
+              ...initialVal,
+              _updatedBy: rowyUser(currentUser),
+              _createdBy: rowyUser(currentUser),
+            },
+            requiredFields
+          );
+        }}
+        variant="contained"
+        color="primary"
+        startIcon={<AddRowIcon />}
+        // sx={{ pr: 1.5 }}
+      >
+        Add Row
+      </Button>
+      {/*
         <Button
-          onClick={() => {
-            const requiredFields = Object.values(columns)
-              .map((column) => {
-                if (column.config.required) {
-                  return column.key;
-                }
-              })
-              .filter((c) => c);
-            const initialVal = Object.values(columns).reduce((acc, column) => {
-              if (column.config?.defaultValue?.type === "static") {
-                return {
-                  ...acc,
-                  [column.key]: column.config.defaultValue.value,
-                };
-              } else if (column.config?.defaultValue?.type === "null") {
-                return { ...acc, [column.key]: null };
-              } else return acc;
-            }, {});
-            tableActions?.row.add(
-              {
-                ...initialVal,
-                _updatedBy: rowyUser(currentUser),
-                _createdBy: rowyUser(currentUser),
-              },
-              requiredFields
-            );
-          }}
-          variant="contained"
-          color="primary"
-          startIcon={<AddRowIcon />}
-          // sx={{ pr: 1.5 }}
+          // aria-controls={open ? 'split-button-menu' : undefined}
+          // aria-expanded={open ? 'true' : undefined}
+          // aria-label="select merge strategy"
+          aria-haspopup="menu"
+          style={{ padding: 0 }}
         >
-          Add Row
+          <ArrowDropDownIcon />
         </Button>
-        /* <Button
-              // aria-controls={open ? 'split-button-menu' : undefined}
-              // aria-expanded={open ? 'true' : undefined}
-              // aria-label="select merge strategy"
-              aria-haspopup="menu"
-              style={{ padding: 0 }}
-            >
-              <ArrowDropDownIcon />
-            </Button>
-          </ButtonGroup> */
-      )}
+      </ButtonGroup>
+      */}
       {/* Spacer */} <div />
       <HiddenFields />
       <Filters />
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7fff21b5..fc08892c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -94,7 +94,7 @@ export default function HomePage() {
 
   if (!Array.isArray(tables))
     return (
-      <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+      <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
         <div>
           {view === "list" ? <TableListSkeleton /> : <TableGridSkeleton />}
         </div>
diff --git a/src/pages/Settings/ProjectSettings.tsx b/src/pages/Settings/ProjectSettings.tsx
index 2e8afce3..a46e10c4 100644
--- a/src/pages/Settings/ProjectSettings.tsx
+++ b/src/pages/Settings/ProjectSettings.tsx
@@ -76,7 +76,7 @@ export default function ProjectSettingsPage() {
   return (
     <Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       {settingsState.loading || publicSettingsState.loading ? (
-        <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+        <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
           <Stack spacing={4}>
             {new Array(sections.length).fill(null).map((_, i) => (
               <SettingsSkeleton key={i} />
diff --git a/src/pages/Settings/UserManagement.tsx b/src/pages/Settings/UserManagement.tsx
index a00e8bda..b3e38879 100644
--- a/src/pages/Settings/UserManagement.tsx
+++ b/src/pages/Settings/UserManagement.tsx
@@ -69,7 +69,7 @@ export default function UserManagementPage() {
       </SlideTransition>
 
       {loading || (query === "" && results.length === 0) ? (
-        <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+        <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
           <Paper>
             <List sx={{ py: { xs: 0, sm: 1.5 }, px: { xs: 0, sm: 1 } }}>
               <UserSkeleton />
diff --git a/src/pages/Settings/UserSettings.tsx b/src/pages/Settings/UserSettings.tsx
index 6bd6cb20..1464d426 100644
--- a/src/pages/Settings/UserSettings.tsx
+++ b/src/pages/Settings/UserSettings.tsx
@@ -55,7 +55,7 @@ export default function UserSettingsPage() {
   return (
     <Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
       {!currentUser || settingsState.loading ? (
-        <Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
+        <Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
           <Stack spacing={4}>
             {new Array(sections.length).fill(null).map((_, i) => (
               <SettingsSkeleton key={i} />
diff --git a/src/pages/Table.tsx b/src/pages/Table.tsx
index ea3f5f07..2b216f79 100644
--- a/src/pages/Table.tsx
+++ b/src/pages/Table.tsx
@@ -71,6 +71,7 @@ export default function TablePage() {
       title={tableName}
       titleComponent={<Breadcrumbs />}
       currentSection={currentSection}
+      titleTransitionProps={{ style: { transformOrigin: "0 50%" } }}
     >
       <ActionParamsProvider>
         {tableState.loadingColumns ? (