Before reverting to client width

samples/react-calendar-feed/src/shared/components/filmstripLayout/FilmstripLayout.tsx

@@ -4,8 +4,36 @@ import * as React from 'react';
 import Slider from 'react-slick';
 import { SPComponentLoader } from '@microsoft/sp-loader';
 import styles from "./FilmstripLayout.module.scss";
-import { useRef } from 'react';
-import useComponentSize, { ComponentSize } from '@rehooks/component-size';
+import { useRef, useEffect, useState } from 'react';
+import useComponentSize from '@rehooks/component-size';
+
+function useDebounce(value: number, delay: number) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}
+
+function useBreakpoints(currentWidth: number, breakpoints: number[]) {
+  return breakpoints.map(breakpoint => currentWidth < breakpoint);
+}
 
 /**
  * Filmstrip layout
@@ -13,25 +41,37 @@ import useComponentSize, { ComponentSize } from '@rehooks/component-size';
  */
 export const FilmstripLayout = (props: { children: any; ariaLabel?: string; }) => {
   let ref: React.MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
-  let size: ComponentSize = useComponentSize(ref);
-  let { width } = size;
-
   // // the slick slider used in normal views
   let _slider: React.MutableRefObject<Slider> = useRef<Slider>(null);
 
+
+
+  let size = useComponentSize(ref);
+  let { width } = size;
+
+  const debouncedWidth = useDebounce(width, 500);
+  const [numSlides, setNumSlides] = useState(3);
+
   SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
   SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
 
-  // slick seems to have an issue with having "infinite" mode set to true and having less items than the number of slides per page
-  // set infinite to true only if there are more than 3 children
-  let numSlides: number = 3;
-  if (width) {
-    if (width > 927) {
-      numSlides = 4;
-    } else if (width <= 695) {
-      numSlides = 2;
-    }
-  }
+  useEffect(
+    () => {
+      console.log("New width", debouncedWidth);
+      // slick seems to have an issue with having "infinite" mode set to true and having less items than the number of slides per page
+      // set infinite to true only if there are more than 3 children
+      const [isSmall, isMedium] = useBreakpoints(debouncedWidth, [696, 928]);
+
+      if (isSmall) {
+        setNumSlides(2);
+      } else if (isMedium) {
+        setNumSlides(3);
+      } else {
+        setNumSlides(4);
+      }
+    },
+    [debouncedWidth] // Only re-call effect if value or delay changes
+  );
 
   var isInfinite: boolean = React.Children.count(props.children) > numSlides;
   var settings: any = {