Remove <Delay /> component

catalog/app/components/Placeholder/Placeholder.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
-import Delay from 'utils/Delay'
-
 interface PlaceholderProps extends M.BoxProps {
   delay?: number
 }
 
-export default function Placeholder({ delay, ...props }: PlaceholderProps) {
+export default function Placeholder({ delay = 1000, ...props }: PlaceholderProps) {
   return (
     <M.Box
       alignItems="center"
@@ -17,7 +15,9 @@ export default function Placeholder({ delay, ...props }: PlaceholderProps) {
       color="common.white"
       {...props}
     >
-      <Delay ms={delay}>{() => <M.CircularProgress size={120} color="inherit" />}</Delay>
+      <M.Fade in style={{ transitionDelay: `${delay}ms` }}>
+        <M.CircularProgress size={120} color="inherit" />
+      </M.Fade>
     </M.Box>
   )
 }

catalog/app/components/SearchResults/SearchResults.tsx

@@ -15,7 +15,6 @@ import * as AWS from 'utils/AWS'
 import AsyncResult from 'utils/AsyncResult'
 import { useBucketExistence } from 'utils/BucketCache'
 import * as Data from 'utils/Data'
-import Delay from 'utils/Delay'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import StyledLink, { linkStyle } from 'utils/StyledLink'
 import { readableBytes } from 'utils/string'
@@ -575,18 +574,14 @@ export function Alt({ className, ...props }: $TSFixMe) {
 export function Progress({ children }: $TSFixMe) {
   return (
     <Alt>
-      <Delay alwaysRender>
-        {(ready) => (
-          <M.Fade in={ready}>
-            <M.Box display="flex" alignItems="center">
-              <M.Box pr={2}>
-                <M.CircularProgress size={24} />
-              </M.Box>
-              <M.Typography variant="body1">{children}</M.Typography>
-            </M.Box>
-          </M.Fade>
-        )}
-      </Delay>
+      <M.Fade in style={{ transitionDelay: '1000ms' }}>
+        <M.Box display="flex" alignItems="center">
+          <M.Box pr={2}>
+            <M.CircularProgress size={24} />
+          </M.Box>
+          <M.Typography variant="body1">{children}</M.Typography>
+        </M.Box>
+      </M.Fade>
     </Alt>
   )
 }

catalog/app/containers/Admin/Buckets/Buckets.tsx

@@ -17,7 +17,6 @@
 import * as Notifications from 'containers/Notifications'
 import type * as Model from 'model'
 import * as APIConnector from 'utils/APIConnector'
-import Delay from 'utils/Delay'
 import type FormSpec from 'utils/FormSpec'
 import * as GQL from 'utils/GraphQL'
 import MetaTitle from 'utils/MetaTitle'
@@ -586,7 +585,11 @@
           />
         )}
       </div>
-      {state.submitting && <Delay>{() => <M.CircularProgress size={24} />}</Delay>}
+      {state.submitting && (
+        <M.Fade in style={{ transitionDelay: '1000ms' }}>
+          <M.CircularProgress size={24} />
+        </M.Fade>
+      )}
       <M.Button
         className={classes.button}
         onClick={() => reset()}
@@ -1358,13 +1361,11 @@
               />
             )}
             {submitting && (
-              <Delay>
-                {() => (
-                  <M.Box flexGrow={1} display="flex" pl={2}>
-                    <M.CircularProgress size={24} />
-                  </M.Box>
-                )}
-              </Delay>
+              <M.Fade in style={{ transitionDelay: '1000ms' }}>
+                <M.Box flexGrow={1} display="flex" pl={2}>
+                  <M.CircularProgress size={24} />
+                </M.Box>
+              </M.Fade>
             )}
             <M.Button
               onClick={() => back('cancel')}
@@ -1478,13 +1479,11 @@
       )}
       <M.DialogActions>
         {submitting && (
-          <Delay>
-            {() => (
-              <M.Box flexGrow={1} display="flex" pl={2}>
-                <M.CircularProgress size={24} />
-              </M.Box>
-            )}
-          </Delay>
+          <M.Fade in style={{ transitionDelay: '1000ms' }}>
+            <M.Box flexGrow={1} display="flex" pl={2}>
+              <M.CircularProgress size={24} />
+            </M.Box>
+          </M.Fade>
         )}
         {!submitting && !!error && (
           <M.Box flexGrow={1} display="flex" alignItems="center" pl={2}>

catalog/app/containers/Bucket/PackageDialog/MetaInput.tsx

@@ -12,7 +12,6 @@ import { JsonValue, ValidationErrors } from 'components/JsonEditor/constants'
 import JsonValidationErrors from 'components/JsonValidationErrors'
 import MetadataEditor from 'components/MetadataEditor'
 import * as Notifications from 'containers/Notifications'
-import Delay from 'utils/Delay'
 import useDragging from 'utils/dragging'
 import { JsonSchema } from 'utils/json-schema'
 import * as spreadsheets from 'utils/spreadsheets'
@@ -377,16 +376,12 @@ export const MetaInput = React.forwardRef<HTMLDivElement, MetaInputProps>(
 
           {locked && (
             <div className={classes.overlay}>
-              <Delay ms={500} alwaysRender>
-                {(ready) => (
-                  <M.Fade in={ready}>
-                    <div className={classes.overlayContents}>
-                      <M.CircularProgress size={20} className={classes.overlayProgress} />
-                      <div className={classes.overlayText}>Reading file contents</div>
-                    </div>
-                  </M.Fade>
-                )}
-              </Delay>
+              <M.Fade in style={{ transitionDelay: '500ms' }}>
+                <div className={classes.overlayContents}>
+                  <M.CircularProgress size={20} className={classes.overlayProgress} />
+                  <div className={classes.overlayText}>Reading file contents</div>
+                </div>
+              </M.Fade>
             </div>
           )}
 

catalog/app/containers/Bucket/PackageDialog/SubmitSpinner.tsx

@@ -3,8 +3,6 @@
 
 import * as M from '@material-ui/core'
 
-import Delay from 'utils/Delay'
-
 interface SubmitSpinnerProps {
   children?: React.ReactNode
   value?: number
@@ -14,28 +12,24 @@
   const hasValue = R.is(Number, value) && value! < 100
 
   return (
-    <Delay ms={200} alwaysRender>
-      {(ready) => (
-        <M.Fade in={ready}>
-          <M.Box flexGrow={1} display="flex" alignItems="center" pl={2}>
-            <M.CircularProgress
-              size={24}
-              variant={hasValue ? 'determinate' : 'indeterminate'}
-              value={hasValue ? value! * 0.9 : undefined}
-            />
+    <M.Fade in style={{ transitionDelay: '200ms' }}>
+      <M.Box flexGrow={1} display="flex" alignItems="center" pl={2}>
+        <M.CircularProgress
+          size={24}
+          variant={hasValue ? 'determinate' : 'indeterminate'}
+          value={hasValue ? value! * 0.9 : undefined}
+        />
 
-            {!!children && (
-              <>
-                <M.Box pl={1} />
+        {!!children && (
+          <>
+            <M.Box pl={1} />
 
-                <M.Typography variant="body2" color="textSecondary">
-                  {children}
-                </M.Typography>
-              </>
-            )}
-          </M.Box>
-        </M.Fade>
-      )}
-    </Delay>
+            <M.Typography variant="body2" color="textSecondary">
+              {children}
+            </M.Typography>
+          </>
+        )}
+      </M.Box>
+    </M.Fade>
   )
 }

catalog/app/containers/NavBar/BucketSelect.js

@@ -10,7 +10,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete'
 import BucketIcon from 'components/BucketIcon'
 import * as style from 'constants/style'
 import * as BucketConfig from 'utils/BucketConfig'
-import Delay from 'utils/Delay'
 import * as NamedRoutes from 'utils/NamedRoutes'
 
 const normalizeBucket = R.pipe(
@@ -221,7 +220,13 @@ function BucketSelect({ cancel, forwardedRef, ...props }) {
 
 export default React.forwardRef(function BucketSelectSuspended(props, ref) {
   return (
-    <React.Suspense fallback={<Delay>{() => <M.CircularProgress />}</Delay>}>
+    <React.Suspense
+      fallback={
+        <M.Fade in style={{ transitionDelay: '1000ms' }}>
+          <M.CircularProgress />
+        </M.Fade>
+      }
+    >
       <BucketSelect {...props} forwardedRef={ref} />
     </React.Suspense>
   )

catalog/app/containers/NavBar/Search.tsx

@@ -4,7 +4,6 @@ import * as M from '@material-ui/core'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 
 import cfg from 'constants/config'
-import Delay from 'utils/Delay'
 
 import { useNavBar, expandAnimationDuration } from './Provider'
 import Suggestions from './Suggestions'
@@ -172,13 +171,9 @@ function SearchNotAvailable() {
 
 function DelayedProgress() {
   return (
-    <Delay alwaysRender>
-      {(ready) => (
-        <M.Fade in={ready}>
-          <M.CircularProgress />
-        </M.Fade>
-      )}
-    </Delay>
+    <M.Fade in style={{ transitionDelay: '1000ms' }}>
+      <M.CircularProgress />
+    </M.Fade>
   )
 }