fix: surveys package resize observer issue (#5907)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

packages/surveys/src/components/wrappers/stacked-cards-container.test.tsx

@@ -399,6 +399,7 @@ describe("StackedCardsContainer", () => {
     const resizeCallback = (global.ResizeObserver as any).mock.calls[0][0];
     act(() => {
       resizeCallback([{ contentRect: { height: 500, width: 300 } }]);
+      vi.runAllTimers(); // Advance timers after resize callback to handle potential internal delays
     });
 
     // Check that cardHeight and cardWidth are passed to StackedCard instances (e.g., next card)

packages/surveys/src/components/wrappers/stacked-cards-container.tsx

@@ -98,24 +98,36 @@ export function StackedCardsContainer({
 
   // UseEffect to handle the resize of current question card and set cardHeight accordingly
   useEffect(() => {
+    let resizeTimeout: NodeJS.Timeout;
+
+    const handleDebouncedResize = (entries: ResizeObserverEntry[]) => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        for (const entry of entries) {
+          setCardHeight(`${entry.contentRect.height.toString()}px`);
+          setCardWidth(entry.contentRect.width);
+        }
+      }, 50); // 50ms debounce
+    };
+
     const timer = setTimeout(() => {
       const currentElement = cardRefs.current[questionIdxTemp];
       if (currentElement) {
         if (resizeObserver.current) {
           resizeObserver.current.disconnect();
         }
+
         resizeObserver.current = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            setCardHeight(`${entry.contentRect.height.toString()}px`);
-            setCardWidth(entry.contentRect.width);
-          }
+          handleDebouncedResize(entries);
         });
         resizeObserver.current.observe(currentElement);
       }
     }, 0);
+
     return () => {
       resizeObserver.current?.disconnect();
       clearTimeout(timer);
+      clearTimeout(resizeTimeout);
     };
   }, [questionIdxTemp, cardArrangement, cardRefs]);