fix: adjust some styles (#2438)

packages/component/src/components/app-sidebar/spolight/index.css.ts

@@ -16,7 +16,7 @@ export const spotlight = style({
   background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
   inset: '0px',
   pointerEvents: 'none',
-  willChange: 'background',
+  willChange: 'background, opacity',
   opacity: spotlightOpacity,
   zIndex: 1,
   transition: 'all 0.2s',

packages/component/src/components/app-sidebar/spolight/index.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { type PropsWithChildren } from 'react';
+
+import { Spotlight } from '.';
+
+export default {
+  title: 'Components/AppSidebar/Spotlight',
+  component: Spotlight,
+} satisfies Meta;
+
+const Container = ({ children }: PropsWithChildren) => (
+  <main
+    style={{
+      position: 'relative',
+      width: '320px',
+      height: '320px',
+      border: '1px solid #ccc',
+    }}
+  >
+    {children}
+  </main>
+);
+
+export const Default: StoryFn = () => {
+  return (
+    <Container>
+      <Spotlight />
+    </Container>
+  );
+};

packages/component/src/components/app-sidebar/spolight/index.tsx

@@ -12,10 +12,10 @@ function useMouseOffset() {
   useEffect(() => {
     if (ref.current && ref.current.parentElement) {
       const el = ref.current.parentElement;
-      const bound = el.getBoundingClientRect();
 
       // debounce?
       const onMouseMove = (e: MouseEvent) => {
+        const bound = el.getBoundingClientRect();
         setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
         setOutside(false);
       };