fix(mobile): change how slider height is calculated (#8049)

Author: pengx17

.github/workflows/build-test.yml

@@ -601,6 +601,7 @@ jobs:
       - lint
       - check-yarn-binary
       - e2e-test
+      - e2e-mobile-test
       - e2e-migration-test
       - unit-test
       - server-test

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -2,7 +2,7 @@ import { useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 
 import { observeResize } from '../../../utils';
 import { Button } from '../../button';
@@ -33,9 +33,29 @@ export const MobileMenu = ({
   const [sliderHeight, setSliderHeight] = useState(0);
   const { setOpen: pSetOpen } = useContext(MobileMenuContext);
   const finalOpen = rootOptions?.open ?? open;
-  const sliderRef = useRef<HTMLDivElement>(null);
   const activeIndex = subMenus.length;
 
+  // dynamic height for slider
+  const onSliderRef = useMemo(() => {
+    let unsub: (() => void) | null = null;
+
+    return (sliderDiv: HTMLDivElement | null) => {
+      unsub?.();
+
+      if (!sliderDiv || !finalOpen) return;
+
+      const active = sliderDiv.querySelector(
+        `.${styles.menuContent}[data-index="${activeIndex}"]`
+      );
+      if (!active) return;
+
+      // for the situation that content is loaded asynchronously
+      unsub = observeResize(active, entry => {
+        setSliderHeight(entry.borderBoxSize[0].blockSize);
+      });
+    };
+  }, [activeIndex, finalOpen]);
+
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
@@ -57,31 +77,6 @@ export const MobileMenu = ({
     [onOpenChange, open]
   );
 
-  // dynamic height for slider
-  useEffect(() => {
-    if (!finalOpen) return;
-    let observer: () => void;
-    const t = setTimeout(() => {
-      const slider = sliderRef.current;
-      if (!slider) return;
-
-      const active = slider.querySelector(
-        `.${styles.menuContent}[data-index="${activeIndex}"]`
-      );
-      if (!active) return;
-
-      // for the situation that content is loaded asynchronously
-      observer = observeResize(active, entry => {
-        setSliderHeight(entry.borderBoxSize[0].blockSize);
-      });
-    }, 0);
-
-    return () => {
-      clearTimeout(t);
-      observer?.();
-    };
-  }, [activeIndex, finalOpen]);
-
   const t = useI18n();
 
   /**
@@ -122,7 +117,7 @@ export const MobileMenu = ({
           }}
         >
           <div
-            ref={sliderRef}
+            ref={onSliderRef}
             className={styles.slider}
             style={{
               transform: `translateX(-${100 * activeIndex}%)`,

tests/affine-mobile/playwright.config.ts

@@ -23,9 +23,11 @@ const config: PlaywrightTestConfig = {
       },
     },
   ],
+  expect: {
+    timeout: process.env.CI ? 15_000 : 5_000,
+  },
   use: {
     baseURL: 'http://localhost:8080/',
-    actionTimeout: 10 * 1000,
     locale: 'en-US',
     // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
     // You can open traces locally(`npx playwright show-trace trace.zip`)