Skip to content

Commit ee4461c

Browse files
authored
[perf] Use transform to animate IndeterminateLoadingBar (#29175)
## Summary & Motivation as titled. ## How I Tested These Changes loaded the page and observed the animation is unchanged
1 parent b3019c4 commit ee4461c

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

Diff for: js_modules/dagster-ui/packages/ui-core/src/ui/IndeterminateLoadingBar.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,23 @@ export const IndeterminateLoadingBar = styled.div<{$loading?: boolean}>`
1616
content: '';
1717
display: block;
1818
height: 100%;
19-
width: 0%;
19+
width: 100%;
2020
background: ${Colors.accentBlue()};
21+
transform-origin: left center;
22+
will-change: transform;
2123
animation: load 2s infinite;
24+
contain: layout style size;
25+
isolation: isolate;
2226
2327
@keyframes load {
2428
0% {
25-
width: 0%;
29+
transform: scaleX(0);
2630
}
2731
50% {
28-
width: 50%;
32+
transform: scaleX(0.5);
2933
}
3034
100% {
31-
width: 100%;
35+
transform: scaleX(1);
3236
}
3337
}
3438
}

0 commit comments

Comments
 (0)