fix hydration issues

Author: Lukas742

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

@@ -0,0 +1,16 @@
+// When reused, move to base pkg
+import { isFirefox as isFirefoxFn } from '@ui5/webcomponents-react-base/Device';
+import { useEffect, useState } from 'react';
+
+/**
+ * SSR ready `isFirefox` check.
+ */
+export function useIsFirefox() {
+  const [isFirefox, setIsFirefox] = useState(false);
+
+  useEffect(() => {
+    setIsFirefox(isFirefoxFn());
+  }, []);
+
+  return isFirefox;
+}

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

@@ -10,7 +10,6 @@ import {
   useStylesheet,
   useSyncRef,
 } from '@ui5/webcomponents-react-base';
-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';
@@ -65,6 +64,7 @@ import { useColumnsDeps } from './hooks/useColumnsDeps.js';
 import { useColumnDragAndDrop } from './hooks/useDragAndDrop.js';
 import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths.js';
 import { useFontsReady } from './hooks/useFontsReady.js';
+import { useIsFirefox } from './hooks/useIsFirefox.js';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
 import { usePopIn } from './hooks/usePopIn.js';
 import { useResizeColumnsConfig } from './hooks/useResizeColumnsConfig.js';
@@ -191,7 +191,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
   useStylesheet(styleData, AnalyticalTable.displayName);
   const isInitialized = useRef(false);
   const fontsReady = useFontsReady();
-  const isFirefox = useMemo(() => isFirefoxFn(), []);
+  const isFirefox = useIsFirefox();
 
   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, useMemo, useRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { FlexBoxDirection } from '../../../enums/FlexBoxDirection.js';
 import { FlexBox } from '../../FlexBox/index.js';
 import type { ClassNames } from '../types/index.js';
@@ -15,13 +15,14 @@ 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(() => {
@@ -42,7 +43,7 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
 
       requestAnimationFrame(forceScrollbarUpdate);
     }
-  }, [tableBodyHeight, scrollContainerRef.current?.scrollHeight, scrollbarRef, isChrome]);
+  }, [tableBodyHeight, scrollContainerRef.current?.scrollHeight, scrollbarRef]);
 
   return (
     <FlexBox