refactor!: next generation AFFiNE code structure (#1176)

apps/web/src/components/pure/loading/Loading.tsx

@@ -0,0 +1,20 @@
+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;

apps/web/src/components/pure/loading/PageLoading.tsx

@@ -0,0 +1,34 @@
+import { styled } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+
+import Loading from './Loading';
+
+// Used for the full page loading
+const StyledLoadingContainer = styled('div')(() => {
+  return {
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#6880FF',
+    h1: {
+      fontSize: '2em',
+      marginTop: '15px',
+      fontWeight: '600',
+    },
+  };
+});
+
+export const PageLoading = ({ text }: { text?: string }) => {
+  const { t } = useTranslation();
+  return (
+    <StyledLoadingContainer>
+      <div className="wrapper">
+        <Loading />
+        <h1>{text ? text : t('Loading')}</h1>
+      </div>
+    </StyledLoadingContainer>
+  );
+};
+
+export default PageLoading;

apps/web/src/components/pure/loading/index.tsx

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

apps/web/src/components/pure/loading/styled.ts

@@ -0,0 +1,94 @@
+import { styled } from '@affine/component';
+
+// Inspired by https://codepen.io/graphilla/pen/rNvBMYY
+export const StyledLoadingWrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return !['size'].includes(prop);
+  },
+})<{ 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%;
+  }
+`;
+  }
+);