review: add listener in useObserver

frontend/src/features/Dashboard/components/DashboardForm/Columns/FirstColumn.tsx

@@ -14,7 +14,7 @@ import { RegulatoryAreas } from '../RegulatoryAreas'
 import { VigilanceAreas } from '../VigilanceAreas'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
-import { useObserver } from '../useObserver'
+import { useObserverAccordion } from '../useObserverAccordion'
 
 import type { DashboardFilters } from '../slice'
 
@@ -66,7 +66,7 @@ export function FirstColumn({
 
   const [columnWidth, setColumnWidth] = useState<number | undefined>(undefined)
 
-  useObserver(columnRef, [
+  useObserverAccordion(columnRef, [
     { ref: regulatoryAreaRef, setState: setRegBookmark },
     { ref: ampRef, setState: setAmpBookmark },
     { ref: vigilanceAreaRef, setState: setVigilanceBookmark }

frontend/src/features/Dashboard/components/DashboardForm/Columns/SecondColumn.tsx

@@ -7,9 +7,9 @@ import { Bookmark, type BookmarkType } from '../Bookmark'
 import { Reportings } from '../Reportings'
 import { getReportingFilters } from '../slice'
 import { TerritorialPressure } from '../TerritorialPressure'
-import { useObserver } from '../useObserver'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
+import { useObserverAccordion } from '../useObserverAccordion'
 
 type SecondColumnProps = {
   dashboardForm: [string, DashboardType]
@@ -55,7 +55,7 @@ export function SecondColumn({
 
   const [columnWidth, setColumnWidth] = useState<number | undefined>(undefined)
 
-  useObserver(columnRef, [
+  useObserverAccordion(columnRef, [
     { ref: territorialPressureRef, setState: setTerritorialPressionBookmark },
     { ref: reportingRef, setState: setReportingBookmark }
   ])

frontend/src/features/Dashboard/components/DashboardForm/Columns/ThirdColumn.tsx

@@ -7,11 +7,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { Comments } from '../Comments'
 import { ControlUnits } from '../ControlUnits'
-import { useObserver } from '../useObserver'
 import { Weather } from '../Weather'
 import { BaseColumn } from './style'
 import { type ColumnProps } from './utils'
 import { type BookmarkType, Bookmark } from '../Bookmark'
+import { useObserverAccordion } from '../useObserverAccordion'
 
 type ThirdColumnProps = {
   dashboardForm: [string, DashboardType]
@@ -59,7 +59,7 @@ export function ThirdColumn({
 
   const [columnWidth, setColumnWidth] = useState<number | undefined>(undefined)
 
-  useObserver(columnRef, [
+  useObserverAccordion(columnRef, [
     { ref: controlUnitRef, setState: setControlUnitBookmark },
     { ref: commentsRef, setState: setCommentsBookmark },
     { ref: weatherRef, setState: setWeatherBookmark }

frontend/src/features/Dashboard/components/DashboardForm/useObserver.tsx → frontend/src/features/Dashboard/components/DashboardForm/useObserverAccordion.tsx

@@ -1,9 +1,8 @@
 import { debounce } from 'lodash'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import type { BookmarkType } from './Bookmark'
 
-// Fonction pour vérifier la visibilité par rapport au conteneur
 const checkVisibility = (
   container: HTMLElement | null,
   element: HTMLElement | null,
@@ -35,7 +34,7 @@ const checkVisibility = (
   )
 }
 
-export const useObserver = (
+export const useObserverAccordion = (
   containerRef: React.RefObject<HTMLElement>,
   observedElements: {
     ref: React.RefObject<HTMLElement>
@@ -52,12 +51,9 @@ export const useObserver = (
         observedElements.forEach(({ ref, setState }) => {
           checkVisibility(containerRef.current, ref.current, setState)
         })
-      }, 100),
+      }, 200),
     [containerRef, observedElements]
   )
-  const handleVisibility = useCallback(() => {
-    debouncedHandleVisibility()
-  }, [debouncedHandleVisibility])
 
   useEffect(() => {
     const container = containerRef.current
@@ -66,12 +62,24 @@ export const useObserver = (
       return undefined
     }
 
-    container.addEventListener('scroll', handleVisibility)
-    container.addEventListener('resize', handleVisibility)
+    observedElements
+      // find the wrapper of the selected item and attached callback when transition ends (open / close accordion)
+      .map(observedElement => observedElement.ref.current?.nextElementSibling?.nextElementSibling)
+      .forEach(selectedItems => {
+        selectedItems?.addEventListener('transitionend', debouncedHandleVisibility)
+      })
+
+    container.addEventListener('scroll', debouncedHandleVisibility)
+    container.addEventListener('resize', debouncedHandleVisibility)
 
     return () => {
-      container.removeEventListener('scroll', handleVisibility)
-      container.removeEventListener('resize', handleVisibility)
+      container.removeEventListener('scroll', debouncedHandleVisibility)
+      container.removeEventListener('resize', debouncedHandleVisibility)
+      observedElements
+        .map(observedElement => observedElement.ref.current?.nextElementSibling?.nextElementSibling)
+        .forEach(selectedItems => {
+          selectedItems?.removeEventListener('transitionend', debouncedHandleVisibility)
+        })
     }
-  }, [containerRef, handleVisibility])
+  }, [containerRef, debouncedHandleVisibility, observedElements])
 }