Remove skeleton animation
- Performance concerns due to large number of animated skeletons
This commit is contained in:
parent
5eeded6c72
commit
b5da8aeb55
1 changed files with 1 additions and 28 deletions
|
@ -3,35 +3,8 @@ import { Skeleton as MantineSkeleton } from '@mantine/core';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const StyledSkeleton = styled(MantineSkeleton)`
|
const StyledSkeleton = styled(MantineSkeleton)`
|
||||||
@keyframes run {
|
|
||||||
0% {
|
|
||||||
left: 0;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: var(--skeleton-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
background: var(--placeholder-bg);
|
||||||
background: linear-gradient(90deg, transparent, var(--skeleton-bg), transparent);
|
|
||||||
transform: translateX(-100%);
|
|
||||||
animation-name: run;
|
|
||||||
animation-duration: 1.5s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
content: '';
|
|
||||||
inset: 0;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
Reference in a new issue