Merge pull request #903 from prezly/feature/care-4909-ikea-site-loses…

…-categories-and-errors

[CARE-4909] Fix - Categories bar sometimes disappearing

components/CategoriesBar/CategoriesBar.tsx

@@ -1,42 +1,42 @@
 import type { Category } from '@prezly/sdk';
 import { translations } from '@prezly/theme-kit-intl';
-import { useMemo, useRef } from 'react';
+import { useMeasure } from '@react-hookz/web';
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { CategoryItem } from '../CategoryItem';
 import Dropdown from '../Dropdown';
 
 import CategoryLink from './CategoryLink';
-import { useCategoriesWithStoriesInCurrentLocale, useRect } from './lib';
+import { useCategoriesWithStoriesInCurrentLocale } from './lib';
 
 import styles from './CategoriesBar.module.scss';
 
 const MORE_BUTTON_WIDTH = +styles.MORE_BUTTON_WIDTH.replace('px', '');
 
 function CategoriesBar() {
-    const containerRef = useRef<HTMLDivElement>(null);
     const { formatMessage } = useIntl();
-    const { width: containerWidth } = useRect(containerRef);
+    const [measurements, containerRef] = useMeasure<HTMLDivElement>();
     const categories = useCategoriesWithStoriesInCurrentLocale();
-    const container = containerRef.current;
+    const containerWidth = measurements?.width ?? 0;
 
     const [visibleCategories, hiddenCategories] = useMemo<[Category[], Category[]]>(() => {
-        if (!container) {
+        if (!containerRef.current) {
             return [categories, []];
         }
 
-        const { paddingLeft, paddingRight } = getComputedStyle(container);
+        const { paddingLeft, paddingRight } = getComputedStyle(containerRef.current);
         const containerWidthWithoutPadding =
             containerWidth - parseInt(paddingLeft) - parseInt(paddingRight);
 
-        if (!container || container.scrollWidth <= containerWidthWithoutPadding) {
+        if (containerRef.current.scrollWidth <= containerWidthWithoutPadding) {
             return [categories, []];
         }
 
         let index = 0;
         let width = 0;
         const widthLimit = containerWidthWithoutPadding - MORE_BUTTON_WIDTH;
-        const nodesArray = Array.from(container.children);
+        const nodesArray = Array.from(containerRef.current.children);
 
         for (let i = 0; i < nodesArray.length; i += 1) {
             const { width: nodeWidth } = nodesArray[i].getBoundingClientRect();
@@ -49,7 +49,7 @@ function CategoriesBar() {
         }
 
         return [categories.slice(0, index), categories.slice(index)];
-    }, [categories, container, containerWidth]);
+    }, [categories, containerRef, containerWidth]);
 
     if (!visibleCategories.length) {
         return null;

components/CategoriesBar/lib/index.ts

@@ -1,2 +1 @@
 export * from './useCategoriesWithStoriesInCurrentLocale';
-export * from './useRect';