frontend/projects/starred: reduce flicker by not overflowing, slightly different strategy

Author: haraldschilly

src/packages/frontend/projects/projects-starred.tsx

@@ -4,19 +4,22 @@
  */
 
 import { Avatar, Button, Dropdown, Space, Tooltip } from "antd";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import { CSS, useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon, TimeAgo } from "@cocalc/frontend/components";
 import { trunc } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { useBookmarkedProjects } from "./use-bookmarked-projects";
-import { blendBackgroundColor, sortProjectsLastEdited } from "./util";
+import { sortProjectsLastEdited } from "./util";
 
 const DROPDOWN_WIDTH = 100; // Width reserved for dropdown button + buffer
 
 const STARRED_BAR_STYLE: CSS = {
   overflow: "hidden",
+  overflowX: "hidden",
+  width: "100%",
+  position: "relative",
 } as const;
 
 const STARRED_BUTTON_STYLE: CSS = {
@@ -56,95 +59,131 @@ export function StarredProjectsBar() {
   }, [bookmarkedProjects, project_map]);
 
   // State for tracking how many projects can be shown
-  const [visibleCount, setVisibleCount] = useState<number>(
-    starredProjects.length,
-  );
+  const [visibleCount, setVisibleCount] = useState<number>(0);
+  const [measurementPhase, setMeasurementPhase] = useState<boolean>(true);
+  const [containerHeight, setContainerHeight] = useState<number>(0);
   const containerRef = useRef<HTMLDivElement>(null);
   const spaceRef = useRef<HTMLDivElement>(null);
+  const measurementContainerRef = useRef<HTMLDivElement>(null);
   const buttonWidthsRef = useRef<number[]>([]);
-  const [measurementComplete, setMeasurementComplete] = useState(false);
 
-  // Reset measurement when projects change
-  useLayoutEffect(() => {
-    setMeasurementComplete(false);
-    setVisibleCount(starredProjects.length);
-  }, [starredProjects]);
+  // Calculate how many buttons fit based on measured widths
+  const calculateVisibleCount = useCallback(() => {
+    if (!containerRef.current) return;
 
-  // Measure buttons on first render and when projects change
-  useLayoutEffect(() => {
-    if (
-      !spaceRef.current ||
-      starredProjects.length === 0 ||
-      measurementComplete
-    ) {
+    // First pass: measure without dropdown space
+    let cumulativeWidth = 0;
+    let countWithoutDropdown = 0;
+
+    for (let i = 0; i < buttonWidthsRef.current.length; i++) {
+      const buttonWidth = buttonWidthsRef.current[i];
+      const spacing = i > 0 ? 8 : 0;
+      cumulativeWidth += buttonWidth + spacing;
+
+      if (cumulativeWidth <= containerRef.current.offsetWidth) {
+        countWithoutDropdown++;
+      } else {
+        break;
+      }
+    }
+
+    // If all projects fit, no dropdown needed
+    if (countWithoutDropdown >= starredProjects.length) {
+      setVisibleCount(starredProjects.length);
       return;
     }
 
-    // Measure all button widths
-    const buttons = spaceRef.current.querySelectorAll<HTMLElement>(
-      ".starred-project-button",
-    );
+    // If not all fit, recalculate with dropdown space reserved
+    const availableWidth = containerRef.current.offsetWidth - DROPDOWN_WIDTH;
+    cumulativeWidth = 0;
+    let countWithDropdown = 0;
+
+    for (let i = 0; i < buttonWidthsRef.current.length; i++) {
+      const buttonWidth = buttonWidthsRef.current[i];
+      const spacing = i > 0 ? 8 : 0;
+      cumulativeWidth += buttonWidth + spacing;
 
-    if (buttons.length === starredProjects.length) {
-      buttonWidthsRef.current = Array.from(buttons).map(
-        (button) => button.offsetWidth,
-      );
-      setMeasurementComplete(true);
+      if (cumulativeWidth <= availableWidth) {
+        countWithDropdown++;
+      } else {
+        break;
+      }
     }
-  }, [starredProjects, measurementComplete]);
 
-  // Calculate how many buttons fit based on measured widths
+    // Show at least 1 project, or all if they fit
+    const finalCount = countWithDropdown === 0 ? 1 : countWithDropdown;
+
+    // Only update state if the value actually changed
+    setVisibleCount((prev) => (prev !== finalCount ? finalCount : prev));
+  }, [starredProjects.length]);
+
+  // Reset measurement phase when projects change
   useLayoutEffect(() => {
-    if (
-      !containerRef.current ||
-      !measurementComplete ||
-      buttonWidthsRef.current.length === 0
-    ) {
+    setMeasurementPhase(true);
+    setVisibleCount(0);
+  }, [starredProjects]);
+
+  // Measure button widths from hidden container and calculate visible count
+  useLayoutEffect(() => {
+    if (!measurementPhase || starredProjects.length === 0) {
       return;
     }
 
-    const calculateVisibleCount = () => {
-      if (!containerRef.current) return;
-      const availableWidth = containerRef.current.offsetWidth - DROPDOWN_WIDTH;
-
-      let cumulativeWidth = 0;
-      let count = 0;
+    // Use requestAnimationFrame to ensure buttons are fully laid out before measuring
+    const frameId = requestAnimationFrame(() => {
+      if (!measurementContainerRef.current) {
+        setMeasurementPhase(false);
+        return;
+      }
 
-      for (let i = 0; i < buttonWidthsRef.current.length; i++) {
-        const buttonWidth = buttonWidthsRef.current[i];
-        // Account for Space component's gap (8px for "small" size)
-        const spacing = i > 0 ? 8 : 0;
-        cumulativeWidth += buttonWidth + spacing;
+      const buttons =
+        measurementContainerRef.current.querySelectorAll<HTMLElement>(
+          ".starred-project-button",
+        );
 
-        if (cumulativeWidth <= availableWidth) {
-          count++;
-        } else {
-          break;
-        }
+      // Capture the height of the measurement container to prevent height collapse
+      const height = measurementContainerRef.current.offsetHeight;
+      if (height > 0) {
+        setContainerHeight(height);
       }
 
-      // Show at least 1 project if there's any space, or all if they all fit
-      const newVisibleCount = count === 0 ? 1 : count;
-
-      // Only show dropdown if there are actually hidden projects
-      if (newVisibleCount >= starredProjects.length) {
-        setVisibleCount(starredProjects.length);
+      if (buttons && buttons.length === starredProjects.length) {
+        buttonWidthsRef.current = Array.from(buttons).map(
+          (button) => button.offsetWidth,
+        );
+        // Calculate visible count immediately after measuring
+        calculateVisibleCount();
       } else {
-        setVisibleCount(newVisibleCount);
+        // If measurement failed, show all projects
+        setVisibleCount(starredProjects.length);
       }
-    };
 
-    // Initial calculation
-    calculateVisibleCount();
+      // Always exit measurement phase once we've attempted to measure
+      setMeasurementPhase(false);
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [starredProjects, calculateVisibleCount, measurementPhase]);
+
+  // Set up ResizeObserver to recalculate visible count on container resize
+  useLayoutEffect(() => {
+    if (!containerRef.current || buttonWidthsRef.current.length === 0) {
+      return;
+    }
 
-    // Recalculate on resize
+    // Recalculate on resize with debounce to prevent flicker
+    let timeoutId: NodeJS.Timeout;
     const resizeObserver = new ResizeObserver(() => {
-      calculateVisibleCount();
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(calculateVisibleCount, 16); // ~60fps
     });
 
     resizeObserver.observe(containerRef.current);
-    return () => resizeObserver.disconnect();
-  }, [measurementComplete, starredProjects.length]);
+    return () => {
+      resizeObserver.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [calculateVisibleCount]);
 
   const handleProjectClick = (
     project_id: string,
@@ -159,8 +198,7 @@ export function StarredProjectsBar() {
     return null; // Hide bar if no starred projects
   }
 
-  // Split projects into visible and overflow
-  const visibleProjects = starredProjects.slice(0, visibleCount);
+  // Get overflow projects for the dropdown menu
   const overflowProjects = starredProjects.slice(visibleCount);
 
   const renderTooltipContent = (project: any) => {
@@ -188,14 +226,16 @@ export function StarredProjectsBar() {
   };
 
   // Helper to render a project button
-  function renderProjectButton(project: any, showTooltip: boolean = true) {
-    // Create background color with faint hint of project color
-    const backgroundColor = blendBackgroundColor(project.color, "white", true);
-
+  function renderProjectButton(
+    project: any,
+    showTooltip: boolean = true,
+    visibility?: "hidden" | "visible",
+  ) {
     const buttonStyle = {
       ...STARRED_BUTTON_STYLE,
-      backgroundColor,
-    };
+      ...(project.color && { borderColor: project.color, borderWidth: 2 }),
+      ...(visibility && { visibility }),
+    } as const;
 
     const button = (
       <Button
@@ -255,7 +295,7 @@ export function StarredProjectsBar() {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            paddingLeft: "5px"
+            paddingLeft: "5px",
           }}
         >
           {project.avatar_image_tiny ? (
@@ -270,22 +310,57 @@ export function StarredProjectsBar() {
   }));
 
   return (
-    <div ref={containerRef} style={STARRED_BAR_STYLE}>
+    <div
+      ref={containerRef}
+      style={{
+        ...STARRED_BAR_STYLE,
+        minHeight: containerHeight > 0 ? `${containerHeight}px` : undefined,
+      }}
+    >
+      {/* Hidden measurement container - rendered off-screen so it doesn't cause visual flicker */}
+      {measurementPhase && (
+        <div
+          ref={measurementContainerRef}
+          style={{
+            position: "fixed",
+            visibility: "hidden",
+            width: containerRef.current?.offsetWidth ?? "100%",
+            display: "flex",
+            gap: "8px",
+            pointerEvents: "none",
+            top: -9999,
+            left: -9999,
+          }}
+        >
+          {starredProjects.map((project) =>
+            renderProjectButton(project, false, "visible"),
+          )}
+        </div>
+      )}
+
+      {/* Actual visible content - only rendered after measurement phase */}
       <Space size="small" ref={spaceRef}>
-        {/* Show all buttons during initial measurement, then only visible ones */}
-        {(!measurementComplete ? starredProjects : visibleProjects).map(
-          (project) => renderProjectButton(project),
-        )}
-        {measurementComplete && overflowProjects.length > 0 && (
-          <Dropdown
-            menu={{ items: overflowMenuItems }}
-            placement="bottomRight"
-            trigger={["click"]}
-          >
-            <Button icon={<Icon name="ellipsis" />}>
-              +{overflowProjects.length}
-            </Button>
-          </Dropdown>
+        {!measurementPhase && (
+          <>
+            {starredProjects
+              .slice(0, visibleCount)
+              .map((project) => renderProjectButton(project))}
+            {/* Show overflow dropdown if there are hidden projects */}
+            {overflowProjects.length > 0 && (
+              <Dropdown
+                menu={{ items: overflowMenuItems }}
+                placement="bottomRight"
+                trigger={["click"]}
+              >
+                <Button
+                  icon={<Icon name="ellipsis" />}
+                  style={{ backgroundColor: "white", marginLeft: "auto" }}
+                >
+                  +{overflowProjects.length}
+                </Button>
+              </Dropdown>
+            )}
+          </>
         )}
       </Space>
     </div>