From 8e88ffdd023f7bc43b453e0b1d48b2584d3c3f4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E7=86=B1?= <sonne@asaki.me>
Date: Fri, 14 Feb 2025 17:09:29 +0800
Subject: [PATCH] fix(ui): optimize resize observer and update toolbar item
 structure of Ribbon (#4644)

---
 .../ui/src/views/components/ribbon/Ribbon.tsx | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/views/components/ribbon/Ribbon.tsx b/packages/ui/src/views/components/ribbon/Ribbon.tsx
index 8c04e0ccdaa..40f66abdffe 100644
--- a/packages/ui/src/views/components/ribbon/Ribbon.tsx
+++ b/packages/ui/src/views/components/ribbon/Ribbon.tsx
@@ -19,7 +19,7 @@ import type { IMenuSchema } from '../../../services/menu/menu-manager.service';
 import { LocaleService } from '@univerjs/core';
 import { clsx } from '@univerjs/design';
 import { MoreFunctionSingle } from '@univerjs/icons';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IMenuManagerService } from '../../../services/menu/menu-manager.service';
 import { MenuManagerPosition, RibbonPosition } from '../../../services/menu/types';
 import { useDependency } from '../../../utils/di';
@@ -69,24 +69,26 @@ export function Ribbon(props: IRibbonProps) {
     // resize observer
     useEffect(() => {
         const observer = new ResizeObserver((entries) => {
-            const toolbar = entries[0].target;
-            const toolbarWidth = toolbar.clientWidth;
-            const toolbarItems = Object.values(toolbarItemRefs.current);
-            const collapsedIds: string[] = [];
-            let totalWidth = 0;
-
-            const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
-
-            for (const { el, key } of toolbarItems) {
-                if (!el) continue;
-
-                totalWidth += el?.getBoundingClientRect().width + 8;
-                if (totalWidth > toolbarWidth - 32 - 8 * (allGroups.length - 1)) {
-                    collapsedIds.push(key);
+            requestAnimationFrame(() => {
+                const toolbar = entries[0].target;
+                const toolbarWidth = toolbar.clientWidth;
+                const toolbarItems = Object.values(toolbarItemRefs.current);
+                const collapsedIds: string[] = [];
+                let totalWidth = 0;
+
+                const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
+
+                for (const { el, key } of toolbarItems) {
+                    if (!el) continue;
+
+                    totalWidth += el?.getBoundingClientRect().width + 8;
+                    if (totalWidth > toolbarWidth - 32 - 8 * (allGroups.length - 1)) {
+                        collapsedIds.push(key);
+                    }
                 }
-            }
 
-            setCollapsedIds(collapsedIds);
+                setCollapsedIds(collapsedIds);
+            });
         });
 
         if (toolbarRef.current) {
@@ -241,9 +243,9 @@ export function Ribbon(props: IRibbonProps) {
                 aria-hidden
                 ref={toolbarRef}
                 className={`
-                  univer-absolute univer-left-0 univer-right-0 univer-top-[-99999px] univer-mx-auto univer-box-border
-                  univer-flex univer-h-full univer-flex-1 univer-items-center univer-justify-center univer-gap-1
-                  univer-overflow-hidden univer-px-4 univer-opacity-0
+                  univer-invisible univer-absolute univer-left-0 univer-right-0 univer-top-[-99999px] univer-mx-auto
+                  univer-box-border univer-flex univer-h-full univer-flex-1 univer-items-center univer-justify-center
+                  univer-gap-1 univer-overflow-hidden univer-px-4
                 `}
             >
                 {fakeToolbarContent}