Merged in fix/SW-3068-sitewide-alert-fix (pull request #2381)

fix(SW-3068): fix race condition that cause alert height not to be set correctly

* fix(SW-3068): fix race condition that cause alert height not to be set correctly


Approved-by: Linus Flood

apps/scandic-web/components/SitewideAlert/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useRef } from "react"
 
 import { trpc } from "@/lib/trpc/client"
 import { StickyElementNameEnum } from "@/stores/sticky-position"
@@ -31,9 +31,11 @@ export default function SiteWideAlert() {
     name: StickyElementNameEnum.SITEWIDE_ALERT,
   })
 
-  const updateHeight = useCallback(() => {
+  const updateHeightRefCallback = useCallback(
-    if (alertRef.current) {
+    (node: HTMLDivElement | null) => {
-      const height = alertRef.current.offsetHeight
+      if (node) {
+        const debouncedUpdate = debounce(([entry]) => {
+          const height = entry.contentRect.height
 
           document.documentElement.style.setProperty(
             "--sitewide-alert-height",
@@ -44,27 +46,21 @@ export default function SiteWideAlert() {
             "--sitewide-alert-sticky-height",
             isAlarm ? `${height}px` : "0px"
           )
-    }
-  }, [isAlarm])
-
-  useEffect(() => {
-    const alertElement = alertRef.current
-    const debouncedResizeHandler = debounce(() => {
-      updateHeight()
         }, 100)
-    const observer = new ResizeObserver(debouncedResizeHandler)
 
-    if (alertElement) {
+        const observer = new ResizeObserver(debouncedUpdate)
-      observer.observe(alertElement)
+        observer.observe(node)
-    }
 
         return () => {
-      if (alertElement) {
+          if (node) {
-        observer.unobserve(alertElement)
+            observer.unobserve(node)
           }
           observer.disconnect()
         }
-  }, [updateHeight])
+      }
+    },
+    [isAlarm]
+  )
 
   if (isLoading || !alert) {
     return null
@@ -73,7 +69,10 @@ export default function SiteWideAlert() {
   return (
     <div
       id="sitewide-alert"
-      ref={alertRef}
+      ref={(node) => {
+        updateHeightRefCallback(node)
+        alertRef.current = node
+      }}
       className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
     >
       <Alert