chore: improves scrolling performance and loading component for dark theme (#8795)

What's Changed

* improve scrolling performance
* loading component for dark theme

packages/frontend/core/src/components/attachment-viewer/pdf-viewer.tsx

@@ -15,13 +15,18 @@ import {
   type PDFVirtuosoContext,
   type PDFVirtuosoProps,
   Scroller,
+  ScrollSeekPlaceholder,
 } from '@affine/core/modules/pdf/views';
 import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 import { CollapseIcon, ExpandIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+import {
+  type ScrollSeekConfiguration,
+  Virtuoso,
+  type VirtuosoHandle,
+} from 'react-virtuoso';
 
 import * as styles from './styles.css';
 import { calculatePageNum } from './utils';
@@ -112,6 +117,13 @@ const PDFViewerInner = ({ pdf, state }: PDFViewerInnerProps) => {
     };
   }, [state, viewportInfo, onPageSelect]);
 
+  const scrollSeekConfig = useMemo<ScrollSeekConfiguration>(() => {
+    return {
+      enter: velocity => Math.abs(velocity) > 1024,
+      exit: velocity => Math.abs(velocity) < 10,
+    };
+  }, []);
+
   useEffect(() => {
     const viewer = viewerRef.current;
     if (!viewer) return;
@@ -142,12 +154,14 @@ const PDFViewerInner = ({ pdf, state }: PDFViewerInnerProps) => {
           Scroller,
           Header: ListPadding,
           Footer: ListPadding,
+          ScrollSeekPlaceholder,
         }}
         context={{
           width: state.meta.width,
           height: state.meta.height,
           pageClassName: styles.pdfPage,
         }}
+        scrollSeekConfiguration={scrollSeekConfig}
       />
       <div className={clsx(['thumbnails', styles.pdfThumbnails])}>
         <div className={clsx([styles.pdfThumbnailsList, { collapsed }])}>
@@ -159,9 +173,11 @@ const PDFViewerInner = ({ pdf, state }: PDFViewerInnerProps) => {
             itemContent={pageContent}
             components={{
               Item,
-              Scroller,
               List: ListWithSmallGap,
+              Scroller,
+              ScrollSeekPlaceholder,
             }}
+            scrollSeekConfiguration={scrollSeekConfig}
             style={thumbnailsConfig.style}
             context={thumbnailsConfig.context}
           />

packages/frontend/core/src/components/attachment-viewer/styles.css.ts

@@ -84,7 +84,7 @@ export const viewer = style({
   display: 'flex',
   flex: 1,
   overflow: 'hidden',
-  resize: 'both',
+  resize: 'none',
   selectors: {
     '&:before': {
       position: 'absolute',

packages/frontend/core/src/modules/pdf/views/components.tsx

@@ -1,7 +1,7 @@
 import { Scrollable } from '@affine/component';
 import clsx from 'clsx';
 import { type CSSProperties, forwardRef, memo } from 'react';
-import type { VirtuosoProps } from 'react-virtuoso';
+import type { ScrollSeekPlaceholderProps, VirtuosoProps } from 'react-virtuoso';
 
 import * as styles from './styles.css';
 
@@ -27,6 +27,26 @@ export const Scroller = forwardRef<HTMLDivElement, PDFVirtuosoProps>(
 
 Scroller.displayName = 'pdf-virtuoso-scroller';
 
+export const ScrollSeekPlaceholder = forwardRef<
+  HTMLDivElement,
+  ScrollSeekPlaceholderProps & {
+    context?: PDFVirtuosoContext;
+  }
+>(({ context }, ref) => {
+  const className = context?.pageClassName;
+  const width = context?.width ?? 537;
+  const height = context?.height ?? 759;
+  const style = { width, aspectRatio: `${width} / ${height}` };
+
+  return (
+    <div className={className} style={style} ref={ref}>
+      <LoadingSvg />
+    </div>
+  );
+});
+
+ScrollSeekPlaceholder.displayName = 'pdf-virtuoso-scroll-seek-placeholder';
+
 export const List = forwardRef<HTMLDivElement, PDFVirtuosoProps>(
   ({ context: _, className, ...props }, ref) => {
     return (
@@ -63,13 +83,8 @@ export const ListPadding = () => (
   <div style={{ width: '100%', height: '20px' }} />
 );
 
-export const LoadingSvg = memo(function LoadingSvg({
+export const LoadingSvg = memo(
-  style,
+  ({ className, style }: { className?: string; style?: CSSProperties }) => {
-  className,
-}: {
-  style?: CSSProperties;
-  className?: string;
-}) {
     return (
       <svg
         className={clsx([styles.pdfLoading, className])}
@@ -77,109 +92,24 @@ export const LoadingSvg = memo(function LoadingSvg({
         width="16"
         height="24"
         viewBox="0 0 537 759"
-      fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        fillOpacity="0.07"
       >
-      <rect width="537" height="759" fill="white" />
+        <rect x="32" y="82" width="361" height="30" rx="4" />
-      <rect
+        <rect x="32" y="142" width="444" height="30" rx="4" />
-        x="32"
+        <rect x="32" y="202" width="387" height="30" rx="4" />
-        y="82"
+        <rect x="32" y="262" width="461" height="30" rx="4" />
-        width="361"
+        <rect x="32" y="322" width="282" height="30" rx="4" />
-        height="30"
+        <rect x="32" y="382" width="361" height="30" rx="4" />
-        rx="4"
+        <rect x="32" y="442" width="444" height="30" rx="4" />
-        fill="black"
+        <rect x="32" y="502" width="240" height="30" rx="4" />
-        fillOpacity="0.07"
+        <rect x="32" y="562" width="201" height="30" rx="4" />
-      />
+        <rect x="32" y="622" width="224" height="30" rx="4" />
-      <rect
+        <rect x="314" y="502" width="191" height="166" rx="4" />
-        x="32"
-        y="142"
-        width="444"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="202"
-        width="387"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="262"
-        width="461"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="322"
-        width="282"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="382"
-        width="361"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="442"
-        width="444"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="502"
-        width="240"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="562"
-        width="201"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="32"
-        y="622"
-        width="224"
-        height="30"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
-      <rect
-        x="314"
-        y="502"
-        width="191"
-        height="166"
-        rx="4"
-        fill="black"
-        fillOpacity="0.07"
-      />
       </svg>
     );
-});
+  }
+);
+
+LoadingSvg.displayName = 'pdf-loading';

packages/frontend/core/src/modules/pdf/views/index.ts

@@ -7,5 +7,6 @@ export {
   type PDFVirtuosoContext,
   type PDFVirtuosoProps,
   Scroller,
+  ScrollSeekPlaceholder,
 } from './components';
 export { PDFPageRenderer } from './page-renderer';

packages/frontend/core/src/modules/pdf/views/styles.css.ts

@@ -58,6 +58,7 @@ export const pdfPageCanvas = style({
 export const pdfLoading = style({
   display: 'flex',
   alignSelf: 'center',
+  margin: 'auto',
   width: '100%',
   height: '100%',
   maxWidth: '537px',