Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(component): affine loading (#1887)

Browse Source
This commit is contained in:
Himself65
2023-04-11 23:48:42 -05:00
committed by GitHub
parent 5535440c55
commit 9dcb96839b
7 changed files with 91 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/src/components/pure/loading/Loading.tsx
View File

@@ -1,20 +0,0 @@
import {
StyledLoading,
StyledLoadingItem,
StyledLoadingWrapper,
} from './styled';
export const Loading = ({ size = 40 }: { size?: number }) => {
return (
<StyledLoadingWrapper size={size}>
<StyledLoading>
<StyledLoadingItem size={size} />
<StyledLoadingItem size={size} />
<StyledLoadingItem size={size} />
<StyledLoadingItem size={size} />
</StyledLoading>
</StyledLoadingWrapper>
);
};
export default Loading;

17
apps/web/src/components/pure/loading/PageLoading.tsx
View File

@@ -1,7 +1,22 @@
import { styled } from '@affine/component';
import { AffineLoading } from '@affine/component/affine-loading';
import { useTranslation } from '@affine/i18n';
import { memo, Suspense } from 'react';
import Loading from './Loading';
export const Loading = memo(function Loading() {
return (
<div
style={{
height: '180px',
width: '180px',
}}
>
<Suspense>
<AffineLoading loop={true} autoplay={true} autoReverse={true} />
</Suspense>
</div>
);
});
// Used for the full page loading
const StyledLoadingContainer = styled('div')(() => {

2
apps/web/src/components/pure/loading/index.tsx
View File

@@ -1,3 +1,3 @@
import Loading from './Loading';
import { Loading } from './PageLoading';
export * from './PageLoading';
export default Loading;

94
apps/web/src/components/pure/loading/styled.ts
View File

@@ -1,94 +0,0 @@
import { styled } from '@affine/component';
// Inspired by https://codepen.io/graphilla/pen/rNvBMYY
export const StyledLoadingWrapper = styled('div', {
shouldForwardProp: prop => {
return !['size'].includes(prop as string);
},
})<{ size?: number }>(({ size = 40 }) => {
return {
width: size * 4,
height: size * 4,
position: 'relative',
};
});
export const StyledLoading = styled('div')`
position: absolute;
left: 25%;
top: 50%;
transform: rotateX(55deg) rotateZ(-45deg);
@keyframes slide {
0% {
transform: translate(var(--sx), var(--sy));
}
65% {
transform: translate(var(--ex), var(--sy));
}
95%,
100% {
transform: translate(var(--ex), var(--ey));
}
}
`;
export const StyledLoadingItem = styled('div')<{ size: number }>(
({ size = 40 }) => {
return `
position: absolute;
width: ${size}px;
height: ${size}px;
background: #9dacf9;
animation: slide 0.9s cubic-bezier(0.65, 0.53, 0.59, 0.93) infinite;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
}
&::before {
background: #5260b9;
transform: skew(0deg, -45deg);
right: 100%;
top: 50%;
}
&::after {
background: #6880ff;
transform: skew(-45deg, 0deg);
top: 100%;
right: 50%;
}
&:nth-of-type(1) {
--sx: 50%;
--sy: -50%;
--ex: 150%;
--ey: 50%;
}
&:nth-of-type(2) {
--sx: -50%;
--sy: -50%;
--ex: 50%;
--ey: -50%;
}
&:nth-of-type(3) {
--sx: 150%;
--sy: 50%;
--ex: 50%;
--ey: 50%;
}
&:nth-of-type(4) {
--sx: 50%;
--sy: 50%;
--ex: -50%;
--ey: -50%;
}
`;
}
);