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/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,123 +83,33 @@ export const ListPadding = () => (
   <div style={{ width: '100%', height: '20px' }} />
 );
 
-export const LoadingSvg = memo(function LoadingSvg({
-  style,
-  className,
-}: {
-  style?: CSSProperties;
-  className?: string;
-}) {
-  return (
-    <svg
-      className={clsx([styles.pdfLoading, className])}
-      style={style}
-      width="16"
-      height="24"
-      viewBox="0 0 537 759"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="537" height="759" fill="white" />
-      <rect
-        x="32"
-        y="82"
-        width="361"
-        height="30"
-        rx="4"
-        fill="black"
+export const LoadingSvg = memo(
+  ({ className, style }: { className?: string; style?: CSSProperties }) => {
+    return (
+      <svg
+        className={clsx([styles.pdfLoading, className])}
+        style={style}
+        width="16"
+        height="24"
+        viewBox="0 0 537 759"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
         fillOpacity="0.07"
-      />
-      <rect
-        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>
-  );
-});
+      >
+        <rect x="32" y="82" width="361" height="30" rx="4" />
+        <rect x="32" y="142" width="444" height="30" rx="4" />
+        <rect x="32" y="202" width="387" height="30" rx="4" />
+        <rect x="32" y="262" width="461" height="30" rx="4" />
+        <rect x="32" y="322" width="282" height="30" rx="4" />
+        <rect x="32" y="382" width="361" height="30" rx="4" />
+        <rect x="32" y="442" width="444" height="30" rx="4" />
+        <rect x="32" y="502" width="240" height="30" rx="4" />
+        <rect x="32" y="562" width="201" height="30" rx="4" />
+        <rect x="32" y="622" width="224" height="30" rx="4" />
+        <rect x="314" y="502" width="191" height="166" rx="4" />
+      </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',