fix(core): onboading performance improvement (#8790)

- compress images
- remove noise assets (700kb)
- remove lottie animations
- remove `perspective` after paper animation to reduce layers

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts

@@ -52,6 +52,7 @@ export const orbitItem = style({
   flexShrink: 0,
   flexGrow: 0,
   overflow: 'hidden',
+  position: 'relative',
 });
 export const doc = style({
   selectors: {
@@ -171,6 +172,7 @@ export const noDragWrapper = style({
   position: 'absolute',
   inset: 0,
   pointerEvents: 'none',
+  width: '100%',
 });
 globalStyle(`${noDragWrapper} > *`, {
   pointerEvents: 'auto',

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx

@@ -113,7 +113,6 @@ export const EdgelessSwitch = ({
       turnOffScalingRef.current?.();
     };
 
-    // TODO(@catsjuice): mobile support
     const onMouseDown = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       if (target.closest('[data-no-drag]')) return;

packages/frontend/core/src/components/affine/onboarding/style.css.ts

@@ -61,10 +61,6 @@ export const onboardingVars = {
     nextButtonShowUpDelay: '20s',
   },
 };
-export const perspective = style({
-  perspective: '10000px',
-  transformStyle: 'preserve-3d',
-});
 export const fadeIn = keyframes({
   from: {
     opacity: 0,
@@ -73,38 +69,39 @@ export const fadeIn = keyframes({
     opacity: 1,
   },
 });
-export const onboarding = style([
-  perspective,
-  {
-    width: '100vw',
-    height: '100vh',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    selectors: {
-      // hack background color for web
-      '&::after': {
-        content: '',
-        position: 'absolute',
-        inset: 0,
-        background: onboardingVars.web.bg,
-        transform: 'translateZ(-1000px) scale(2)',
-        transition: 'opacity 0.3s ease',
-      },
-      '&[data-is-desktop="true"]::after': {
-        animation: `${fadeIn} 0.8s linear`,
-        // content: 'unset',
-        background:
-          'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)',
-      },
-      '&[data-is-window="true"][data-is-desktop="true"]::after': {
-        opacity: 0,
-      },
+export const onboarding = style({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+  selectors: {
+    '&[data-is-window="false"]': {
+      perspective: '10000px',
+      transformStyle: 'preserve-3d',
+    },
+    // hack background color for web
+    '&::after': {
+      content: '',
+      position: 'absolute',
+      inset: 0,
+      background: onboardingVars.web.bg,
+      transform: 'translateZ(-1000px) scale(2)',
+      transition: 'opacity 0.3s ease',
+    },
+    '&[data-is-desktop="true"]::after': {
+      animation: `${fadeIn} 0.8s linear`,
+      // content: 'unset',
+      background:
+        'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)',
+    },
+    '&[data-is-window="true"][data-is-desktop="true"]::after': {
+      opacity: 0,
     },
   },
-]);
-globalStyle(`${onboarding} *`, {
+});
+globalStyle(`${onboarding}[data-is-window="false"] *`, {
   perspective: '10000px',
   transformStyle: 'preserve-3d',
 });
@@ -146,3 +143,7 @@ globalStyle(`${tipsWrapper} > *`, {
 globalStyle(`${tipsWrapper}[data-visible="true"] > *`, {
   pointerEvents: 'auto',
 });
+// transparent background for onboarding window
+globalStyle(`:root`, {
+  backgroundColor: 'transparent',
+});

packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx

@@ -1,3 +1,4 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { keyframes, style } from '@vanilla-extract/css';
 
 import { block } from '../articles/blocks.css';
@@ -33,24 +34,21 @@ export const switchButtons = style({
 });
 
 export const switchButton = style({
-  width: 24,
-  height: 24,
-  transform: 'scale(2)',
+  width: 48,
+  height: 48,
+  fontSize: 36,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   boxShadow: 'none',
   opacity: 0.6,
   cursor: 'pointer',
+  color: cssVarV2('switch/iconColor/default'),
+  position: 'relative',
   selectors: {
-    '&:nth-child(1)': {
-      transformOrigin: 'left',
-    },
-    '&:nth-child(2)': {
-      transformOrigin: 'right',
-    },
     '&[data-active="true"]': {
       opacity: 1,
+      color: cssVarV2('switch/iconColor/active'),
     },
   },
 });

packages/frontend/core/src/components/affine/onboarding/switch-widgets/switch.tsx

@@ -1,10 +1,7 @@
+import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 
-import {
-  EdgelessSwitchItem,
-  PageSwitchItem,
-} from '../../../blocksuite/block-suite-mode-switch/switch-items';
 import type { EdgelessSwitchMode } from '../types';
 import * as styles from './style.css';
 
@@ -27,16 +24,20 @@ export const EdgelessSwitchButtons = ({
       className={clsx(styles.switchButtons, className)}
       {...attrs}
     >
-      <PageSwitchItem
+      <div
         className={styles.switchButton}
         data-active={mode === 'page'}
         onClick={onSwitchToPageMode}
-      />
-      <EdgelessSwitchItem
+      >
+        <PageIcon />
+      </div>
+      <div
         className={styles.switchButton}
         data-active={mode === 'edgeless'}
         onClick={onSwitchToEdgelessMode}
-      />
+      >
+        <EdgelessIcon />
+      </div>
     </div>
   );
 };