different Skeleton for Copy and Update dialogs

quiltdata · Dec 2, 2020 · 3448278 · nl0 · Dec 2, 2020 · 3448278
1 parent eb70237
commit 3448278
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/catalog/app/containers/Bucket/PackageCopyDialog.js b/catalog/app/containers/Bucket/PackageCopyDialog.js
@@ -10,6 +10,7 @@ import * as AWS from 'utils/AWS'
 import * as Data from 'utils/Data'
 import Delay from 'utils/Delay'
 import * as NamedRoutes from 'utils/NamedRoutes'
+import Skeleton from 'components/Skeleton'
 import StyledLink from 'utils/StyledLink'
 import tagged from 'utils/tagged'
 import * as workflows from 'utils/workflows'
@@ -44,6 +45,37 @@ async function requestPackageCopy(
   }
 }
 
+function FormSkeleton({ animate }) {
+  const headerSkeleton = <Skeleton {...{ height: 48, mt: 2, animate }} />
+  const inputsSkeleton = <Skeleton {...{ height: 48, mt: 3, animate }} />
+  const metadataSkeleton = (
+    <M.Box mt={3}>
+      <M.Box display="flex" mb={2}>
+        <Skeleton {...{ height: 24, width: 64, animate }} />
+        <M.Box flexGrow={1} />
+        <Skeleton {...{ height: 24, width: 64, animate }} />
+      </M.Box>
+      <M.Box display="flex">
+        <Skeleton {...{ height: 32, width: 200, animate }} />
+        <Skeleton {...{ height: 32, ml: 0.5, flexGrow: 1, animate }} />
+      </M.Box>
+      <M.Box display="flex" mt={0.5}>
+        <Skeleton {...{ height: 32, width: 200, animate }} />
+        <Skeleton {...{ height: 32, ml: 0.5, flexGrow: 1, animate }} />
+      </M.Box>
+    </M.Box>
+  )
+  const workflowSkeleton = <Skeleton {...{ height: 80, mt: 3, mb: 3, animate }} />
+  return (
+    <>
+      {headerSkeleton}
+      {inputsSkeleton}
+      {metadataSkeleton}
+      {workflowSkeleton}
+    </>
+  )
+}
+
 function DialogTitle({ bucket }) {
   const { urls } = NamedRoutes.use()
 
@@ -240,6 +272,7 @@ function DialogError({ bucket, error, onCancel }) {
   return (
     <PD.DialogError
       error={error}
+      skeletonElement={<FormSkeleton animate={false} />}
       title={
         <>
           Push package to{' '}
@@ -259,6 +292,7 @@ function DialogLoading({ bucket, onCancel }) {
 
   return (
     <PD.DialogLoading
+      skeletonElement={<FormSkeleton animate={false} />}
       title={
         <>
           Push package to{' '}

diff --git a/catalog/app/containers/Bucket/PackageDialog/DialogError.js b/catalog/app/containers/Bucket/PackageDialog/DialogError.js
@@ -5,7 +5,6 @@ import { fade } from '@material-ui/core/styles'
 
 import { readableBytes } from 'utils/string'
 
-import FormSkeleton from './FormSkeleton'
 import * as ERRORS from '../errors'
 
 const useStyles = M.makeStyles((t) => ({
@@ -58,15 +57,15 @@ const errorDisplay = R.cond([
   ],
 ])
 
-export default function DialogError({ error, title, onCancel }) {
+export default function DialogError({ error, skeletonElement, title, onCancel }) {
   const classes = useStyles()
 
   return (
     <>
       <M.DialogTitle>{title}</M.DialogTitle>
 
       <M.DialogContent className={classes.content}>
-        <FormSkeleton animate={false} />
+        {skeletonElement}
         <div className={classes.overlay}>{errorDisplay(error)}</div>
       </M.DialogContent>
 

diff --git a/catalog/app/containers/Bucket/PackageDialog/DialogLoading.js b/catalog/app/containers/Bucket/PackageDialog/DialogLoading.js
@@ -1,25 +1,21 @@
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
-import FormSkeleton from './FormSkeleton'
-
 const useStyles = M.makeStyles(() => ({
   content: {
     paddingTop: 0,
     position: 'relative',
   },
 }))
 
-export default function DialogLoading({ animate, title, onCancel }) {
+export default function DialogLoading({ skeletonElement, title, onCancel }) {
   const classes = useStyles()
 
   return (
     <div>
       <M.DialogTitle>{title}</M.DialogTitle>
 
-      <M.DialogContent className={classes.content}>
-        <FormSkeleton animate={animate} />
-      </M.DialogContent>
+      <M.DialogContent className={classes.content}>{skeletonElement}</M.DialogContent>
 
       <M.DialogActions>
         <M.Button onClick={onCancel}>Cancel</M.Button>

diff --git a/catalog/app/containers/Bucket/PackageDialog/PackageDialog.js b/catalog/app/containers/Bucket/PackageDialog/PackageDialog.js
@@ -336,6 +336,7 @@ export function SchemaFetcher({ children, schemaUrl }) {
   return children(res)
 }
 
+// TODO: use this skeleton for FormSkeleton
 export function MetaInputSkeleton() {
   const classes = useMetaInputStyles()
   const t = M.useTheme()