Skip to content

Commit f90917d

Browse files
fiskusfiskus
authored
Remove <Delay /> component (#4132)
1 parent c5edede commit f90917d

File tree

8 files changed

+60
-96
lines changed

8 files changed

+60
-96
lines changed

‎catalog/app/components/Placeholder/Placeholder.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import * as React from 'react'
22
import * as M from '@material-ui/core'
33

4-
import Delay from 'utils/Delay'
5-
64
interface PlaceholderProps extends M.BoxProps {
75
delay?: number
86
}
97

10-
export default function Placeholder({ delay, ...props }: PlaceholderProps) {
8+
export default function Placeholder({ delay = 1000, ...props }: PlaceholderProps) {
119
return (
1210
<M.Box
1311
alignItems="center"
@@ -17,7 +15,9 @@ export default function Placeholder({ delay, ...props }: PlaceholderProps) {
1715
color="common.white"
1816
{...props}
1917
>
20-
<Delay ms={delay}>{() => <M.CircularProgress size={120} color="inherit" />}</Delay>
18+
<M.Fade in style={{ transitionDelay: `${delay}ms` }}>
19+
<M.CircularProgress size={120} color="inherit" />
20+
</M.Fade>
2121
</M.Box>
2222
)
2323
}

‎catalog/app/components/SearchResults/SearchResults.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import * as AWS from 'utils/AWS'
1515
import AsyncResult from 'utils/AsyncResult'
1616
import { useBucketExistence } from 'utils/BucketCache'
1717
import * as Data from 'utils/Data'
18-
import Delay from 'utils/Delay'
1918
import * as NamedRoutes from 'utils/NamedRoutes'
2019
import StyledLink, { linkStyle } from 'utils/StyledLink'
2120
import { readableBytes } from 'utils/string'
@@ -575,18 +574,14 @@ export function Alt({ className, ...props }: $TSFixMe) {
575574
export function Progress({ children }: $TSFixMe) {
576575
return (
577576
<Alt>
578-
<Delay alwaysRender>
579-
{(ready) => (
580-
<M.Fade in={ready}>
581-
<M.Box display="flex" alignItems="center">
582-
<M.Box pr={2}>
583-
<M.CircularProgress size={24} />
584-
</M.Box>
585-
<M.Typography variant="body1">{children}</M.Typography>
586-
</M.Box>
587-
</M.Fade>
588-
)}
589-
</Delay>
577+
<M.Fade in style={{ transitionDelay: '1000ms' }}>
578+
<M.Box display="flex" alignItems="center">
579+
<M.Box pr={2}>
580+
<M.CircularProgress size={24} />
581+
</M.Box>
582+
<M.Typography variant="body1">{children}</M.Typography>
583+
</M.Box>
584+
</M.Fade>
590585
</Alt>
591586
)
592587
}

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import Skeleton from 'components/Skeleton'
1717
import * as Notifications from 'containers/Notifications'
1818
import type * as Model from 'model'
1919
import * as APIConnector from 'utils/APIConnector'
20-
import Delay from 'utils/Delay'
2120
import type FormSpec from 'utils/FormSpec'
2221
import * as GQL from 'utils/GraphQL'
2322
import MetaTitle from 'utils/MetaTitle'
@@ -586,7 +585,11 @@ function CardActions<T>({ action, disabled, form }: CardActionsProps<T>) {
586585
/>
587586
)}
588587
</div>
589-
{state.submitting && <Delay>{() => <M.CircularProgress size={24} />}</Delay>}
588+
{state.submitting && (
589+
<M.Fade in style={{ transitionDelay: '1000ms' }}>
590+
<M.CircularProgress size={24} />
591+
</M.Fade>
592+
)}
590593
<M.Button
591594
className={classes.button}
592595
onClick={() => reset()}
@@ -1358,13 +1361,11 @@ function Add({ back, settings, submit }: AddProps) {
13581361
/>
13591362
)}
13601363
{submitting && (
1361-
<Delay>
1362-
{() => (
1363-
<M.Box flexGrow={1} display="flex" pl={2}>
1364-
<M.CircularProgress size={24} />
1365-
</M.Box>
1366-
)}
1367-
</Delay>
1364+
<M.Fade in style={{ transitionDelay: '1000ms' }}>
1365+
<M.Box flexGrow={1} display="flex" pl={2}>
1366+
<M.CircularProgress size={24} />
1367+
</M.Box>
1368+
</M.Fade>
13681369
)}
13691370
<M.Button
13701371
onClick={() => back('cancel')}
@@ -1478,13 +1479,11 @@ function Reindex({ bucket, open, close }: ReindexProps) {
14781479
)}
14791480
<M.DialogActions>
14801481
{submitting && (
1481-
<Delay>
1482-
{() => (
1483-
<M.Box flexGrow={1} display="flex" pl={2}>
1484-
<M.CircularProgress size={24} />
1485-
</M.Box>
1486-
)}
1487-
</Delay>
1482+
<M.Fade in style={{ transitionDelay: '1000ms' }}>
1483+
<M.Box flexGrow={1} display="flex" pl={2}>
1484+
<M.CircularProgress size={24} />
1485+
</M.Box>
1486+
</M.Fade>
14881487
)}
14891488
{!submitting && !!error && (
14901489
<M.Box flexGrow={1} display="flex" alignItems="center" pl={2}>

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

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { JsonValue, ValidationErrors } from 'components/JsonEditor/constants'
1212
import JsonValidationErrors from 'components/JsonValidationErrors'
1313
import MetadataEditor from 'components/MetadataEditor'
1414
import * as Notifications from 'containers/Notifications'
15-
import Delay from 'utils/Delay'
1615
import useDragging from 'utils/dragging'
1716
import { JsonSchema } from 'utils/json-schema'
1817
import * as spreadsheets from 'utils/spreadsheets'
@@ -377,16 +376,12 @@ export const MetaInput = React.forwardRef<HTMLDivElement, MetaInputProps>(
377376

378377
{locked && (
379378
<div className={classes.overlay}>
380-
<Delay ms={500} alwaysRender>
381-
{(ready) => (
382-
<M.Fade in={ready}>
383-
<div className={classes.overlayContents}>
384-
<M.CircularProgress size={20} className={classes.overlayProgress} />
385-
<div className={classes.overlayText}>Reading file contents</div>
386-
</div>
387-
</M.Fade>
388-
)}
389-
</Delay>
379+
<M.Fade in style={{ transitionDelay: '500ms' }}>
380+
<div className={classes.overlayContents}>
381+
<M.CircularProgress size={20} className={classes.overlayProgress} />
382+
<div className={classes.overlayText}>Reading file contents</div>
383+
</div>
384+
</M.Fade>
390385
</div>
391386
)}
392387

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

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import * as React from 'react'
33

44
import * as M from '@material-ui/core'
55

6-
import Delay from 'utils/Delay'
7-
86
interface SubmitSpinnerProps {
97
children?: React.ReactNode
108
value?: number
@@ -14,28 +12,24 @@ export default function SubmitSpinner({ children, value }: SubmitSpinnerProps) {
1412
const hasValue = R.is(Number, value) && value! < 100
1513

1614
return (
17-
<Delay ms={200} alwaysRender>
18-
{(ready) => (
19-
<M.Fade in={ready}>
20-
<M.Box flexGrow={1} display="flex" alignItems="center" pl={2}>
21-
<M.CircularProgress
22-
size={24}
23-
variant={hasValue ? 'determinate' : 'indeterminate'}
24-
value={hasValue ? value! * 0.9 : undefined}
25-
/>
15+
<M.Fade in style={{ transitionDelay: '200ms' }}>
16+
<M.Box flexGrow={1} display="flex" alignItems="center" pl={2}>
17+
<M.CircularProgress
18+
size={24}
19+
variant={hasValue ? 'determinate' : 'indeterminate'}
20+
value={hasValue ? value! * 0.9 : undefined}
21+
/>
2622

27-
{!!children && (
28-
<>
29-
<M.Box pl={1} />
23+
{!!children && (
24+
<>
25+
<M.Box pl={1} />
3026

31-
<M.Typography variant="body2" color="textSecondary">
32-
{children}
33-
</M.Typography>
34-
</>
35-
)}
36-
</M.Box>
37-
</M.Fade>
38-
)}
39-
</Delay>
27+
<M.Typography variant="body2" color="textSecondary">
28+
{children}
29+
</M.Typography>
30+
</>
31+
)}
32+
</M.Box>
33+
</M.Fade>
4034
)
4135
}

‎catalog/app/containers/NavBar/BucketSelect.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete'
1010
import BucketIcon from 'components/BucketIcon'
1111
import * as style from 'constants/style'
1212
import * as BucketConfig from 'utils/BucketConfig'
13-
import Delay from 'utils/Delay'
1413
import * as NamedRoutes from 'utils/NamedRoutes'
1514

1615
const normalizeBucket = R.pipe(
@@ -221,7 +220,13 @@ function BucketSelect({ cancel, forwardedRef, ...props }) {
221220

222221
export default React.forwardRef(function BucketSelectSuspended(props, ref) {
223222
return (
224-
<React.Suspense fallback={<Delay>{() => <M.CircularProgress />}</Delay>}>
223+
<React.Suspense
224+
fallback={
225+
<M.Fade in style={{ transitionDelay: '1000ms' }}>
226+
<M.CircularProgress />
227+
</M.Fade>
228+
}
229+
>
225230
<BucketSelect {...props} forwardedRef={ref} />
226231
</React.Suspense>
227232
)

‎catalog/app/containers/NavBar/Search.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as M from '@material-ui/core'
44
import { fade } from '@material-ui/core/styles/colorManipulator'
55

66
import cfg from 'constants/config'
7-
import Delay from 'utils/Delay'
87

98
import { useNavBar, expandAnimationDuration } from './Provider'
109
import Suggestions from './Suggestions'
@@ -172,13 +171,9 @@ function SearchNotAvailable() {
172171

173172
function DelayedProgress() {
174173
return (
175-
<Delay alwaysRender>
176-
{(ready) => (
177-
<M.Fade in={ready}>
178-
<M.CircularProgress />
179-
</M.Fade>
180-
)}
181-
</Delay>
174+
<M.Fade in style={{ transitionDelay: '1000ms' }}>
175+
<M.CircularProgress />
176+
</M.Fade>
182177
)
183178
}
184179

‎catalog/app/utils/Delay.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)