feat(core): add new loading doc component (#11737)

packages/frontend/component/src/components/page-detail-skeleton/index.css.ts

@@ -1,18 +1,84 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const pageDetailSkeletonStyle = style({
   padding: '0 20px',
-});
-export const pageDetailSkeletonTitleStyle = style({
-  height: '52px',
-  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
 });
 export const blockSuiteEditorStyle = style({
   maxWidth: cssVar('editorWidth'),
-  margin: '0 2rem',
+  margin: 'auto 2rem',
   padding: '0 24px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
 });
-export const blockSuiteEditorHeaderStyle = style({
-  marginTop: '40px',
-  marginBottom: '40px',
+export const illustration = style({
+  maxWidth: '100%',
+  width: 300,
+  alignSelf: 'center',
+});
+export const content = style({
+  width: '100%',
+  textAlign: 'center',
+  maxWidth: '261px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '16px auto 0',
+  selectors: {
+    '&[data-longer-loading="true"]': {
+      maxWidth: '400px',
+    },
+  },
+});
+export const loadingIcon = style({
+  marginRight: '8px',
+});
+export const title = style({
+  fontSize: cssVar('fontBase'),
+  lineHeight: 1.6,
+  fontWeight: 500,
+  color: cssVarV2('text/primary'),
+  textAlign: 'center',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '8px',
+  marginBottom: '4px',
+});
+export const text = style({
+  fontSize: cssVar('fontSm'),
+  lineHeight: 1.6,
+  fontWeight: 400,
+  color: cssVarV2('text/secondary'),
+  textWrap: 'wrap',
+  wordBreak: 'break-word',
+  textAlign: 'center',
+  selectors: {
+    '&[data-longer-loading="true"]': {
+      textAlign: 'start',
+    },
+  },
+});
+export const actionButton = style({ marginTop: '24px' });
+export const mobileActionButton = style({
+  padding: '8px 18px',
+  height: 'auto',
+  fontWeight: 600,
+  marginTop: '24px',
+});
+
+export const actionContent = style({
+  padding: '0 4px',
+});
+export const mobileActionContent = style({
+  padding: '0 4px',
 });

packages/frontend/component/src/components/page-detail-skeleton/index.tsx

@@ -1,28 +1,89 @@
-import { Skeleton } from '../../ui/skeleton';
-import {
-  blockSuiteEditorHeaderStyle,
-  blockSuiteEditorStyle,
-  pageDetailSkeletonStyle,
-  pageDetailSkeletonTitleStyle,
-} from './index.css';
+import { Trans, useI18n } from '@affine/i18n';
+import clsx from 'clsx';
+import { useCallback } from 'react';
 
-export const EditorLoading = () => {
+import { Button } from '../../ui/button';
+import { Loading } from '../../ui/loading';
+import { ThemedImg } from '../../ui/themed-img';
+import imageUrlForDarkLoading from './assets/loading.dark.png';
+import imageUrlForLightLoading from './assets/loading.light.png';
+import * as styles from './index.css';
+
+export const EditorLoading = ({
+  longerLoading = false,
+}: {
+  longerLoading?: boolean;
+}) => {
+  const t = useI18n();
+  const reloadPage = useCallback(() => {
+    document.location.reload();
+  }, []);
   return (
-    <div className={blockSuiteEditorStyle}>
-      <Skeleton
-        className={blockSuiteEditorHeaderStyle}
-        animation="wave"
-        height={50}
+    <div className={styles.blockSuiteEditorStyle}>
+      <ThemedImg
+        style={{ width: '300px' }}
+        draggable={false}
+        className={styles.illustration}
+        lightSrc={imageUrlForLightLoading}
+        darkSrc={imageUrlForDarkLoading}
       />
-      <Skeleton animation="wave" height={30} width="40%" />
+      {longerLoading ? (
+        <div className={styles.content} data-longer-loading={true}>
+          <div>
+            <div className={styles.text} data-longer-loading={true}>
+              {t['com.affine.error.loading-timeout-error']()}
+            </div>
+            <div className={styles.text} data-longer-loading={true}>
+              <Trans
+                i18nKey="com.affine.error.contact-us"
+                components={{
+                  1: (
+                    <a
+                      style={{ color: 'var(--affine-primary-color)' }}
+                      href="https://community.affine.pro"
+                      target="__blank"
+                    />
+                  ),
+                }}
+              />
+            </div>
+          </div>
+          <Button
+            size="large"
+            className={clsx(
+              BUILD_CONFIG.isMobileEdition
+                ? styles.mobileActionButton
+                : styles.actionButton
+            )}
+            contentClassName={clsx(
+              BUILD_CONFIG.isMobileEdition
+                ? styles.mobileActionContent
+                : styles.actionContent
+            )}
+            onClick={reloadPage}
+            variant="primary"
+          >
+            {t['com.affine.error.reload']()}
+          </Button>
+        </div>
+      ) : (
+        <div className={styles.content}>
+          <div className={styles.title}>
+            <Loading size={20} className={styles.loadingIcon} />
+            {t['com.affine.loading']()}
+          </div>
+          <div className={styles.text}>
+            {t['com.affine.loading.description']()}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
-export const PageDetailSkeleton = () => {
+export const PageDetailLoading = () => {
   return (
-    <div className={pageDetailSkeletonStyle}>
-      <div className={pageDetailSkeletonTitleStyle} />
+    <div className={styles.pageDetailSkeletonStyle}>
       <EditorLoading />
     </div>
   );