fix hydration error

Author: Lukas742

packages/main/src/components/AnalyticalTable/hooks/useSyncScroll.ts

@@ -10,13 +10,13 @@ export function useSyncScroll(
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    const content = refContent.current;
-    const scrollbar = refScrollbar.current;
-
     if (disabled) {
       return;
     }
 
+    const content = refContent.current;
+    const scrollbar = refScrollbar.current;
+
     if (!content || !scrollbar || !isMounted) {
       setIsMounted(true);
       return;
@@ -46,5 +46,5 @@ export function useSyncScroll(
       content.removeEventListener('scroll', onScrollContent);
       scrollbar.removeEventListener('scroll', onScrollScrollbar);
     };
-  }, [isMounted, refContent, refScrollbar]);
+  }, [isMounted, refContent, refScrollbar, disabled]);
 }

packages/main/src/components/AnalyticalTable/index.tsx

@@ -10,7 +10,7 @@ import {
   useStylesheet,
   useSyncRef,
 } from '@ui5/webcomponents-react-base';
-import { isFirefox as isFireFoxFn } from '@ui5/webcomponents-react-base/Device';
+import { isFirefox as isFirefoxFn } from '@ui5/webcomponents-react-base/Device';
 import { clsx } from 'clsx';
 import type { CSSProperties, MutableRefObject } from 'react';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
@@ -100,8 +100,6 @@ import {
 } from './util/index.js';
 import { VerticalResizer } from './VerticalResizer.js';
 
-const isFirefox = isFireFoxFn();
-
 // When a sorted column is removed from the visible columns array (e.g. when "popped-in"), it doesn't clean up the sorted columns leading to an undefined `sortType`.
 const sortTypesFallback = {
   undefined: () => undefined,
@@ -193,6 +191,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
   useStylesheet(styleData, AnalyticalTable.displayName);
   const isInitialized = useRef(false);
   const fontsReady = useFontsReady();
+  const isFirefox = useMemo(() => isFirefoxFn(), []);
 
   const alwaysShowSubComponent =
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.Visible ||

packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx

@@ -2,7 +2,7 @@ import { isChrome as isChromeFn } from '@ui5/webcomponents-react-base/Device';
 import { useSyncRef } from '@ui5/webcomponents-react-base/internal/hooks';
 import { clsx } from 'clsx';
 import type { MutableRefObject } from 'react';
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { FlexBoxDirection } from '../../../enums/FlexBoxDirection.js';
 import { FlexBox } from '../../FlexBox/index.js';
 import type { ClassNames } from '../types/index.js';
@@ -15,14 +15,13 @@ interface VerticalScrollbarProps {
   classNames: ClassNames;
 }
 
-const isChrome = isChromeFn();
-
 export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarProps>((props, ref) => {
   const { internalRowHeight, tableRef, tableBodyHeight, scrollContainerRef, classNames } = props;
   const hasHorizontalScrollbar = tableRef?.current?.offsetWidth !== tableRef?.current?.scrollWidth;
   const horizontalScrollbarSectionStyles = clsx(hasHorizontalScrollbar && classNames.bottomSection);
   const [componentRef, scrollbarRef] = useSyncRef<HTMLDivElement>(ref);
   const contentRef = useRef<HTMLDivElement>(null);
+  const isChrome = useMemo(() => isChromeFn(), []);
 
   // Force style recalculation to fix Chrome scrollbar-color bug (track height not updating correctly)
   useEffect(() => {
@@ -43,7 +42,7 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
 
       requestAnimationFrame(forceScrollbarUpdate);
     }
-  }, [tableBodyHeight, scrollContainerRef.current?.scrollHeight, scrollbarRef]);
+  }, [tableBodyHeight, scrollContainerRef.current?.scrollHeight, scrollbarRef, isChrome]);
 
   return (
     <FlexBox