[#277] fixed conditions to prevent blink in compact event chips (#280)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Event/EventChip/EventChip.tsx

@@ -19,10 +19,10 @@ import {
   getOwnerAttendee,
   getTitleStyle,
   IconDisplayConfig,
+  useCompactMode,
 } from "./EventChipUtils";
 import { SimpleEventChip } from "./SimpleEventChip";
 
-const COMPACT_WIDTH_THRESHOLD = 100;
 const PRIVATE_CLASSIFICATIONS = ["PRIVATE", "CONFIDENTIAL"];
 
 export const EVENT_DURATION = {
@@ -31,34 +31,6 @@ export const EVENT_DURATION = {
   LONG: 60,
 } as const;
 
-function useCompactMode(
-  cardRef: React.RefObject<HTMLDivElement | null>
-): boolean {
-  const [showCompact, setShowCompact] = useState(false);
-
-  useEffect(() => {
-    const checkWidth = () => {
-      if (cardRef.current) {
-        const width = cardRef.current.offsetWidth;
-        setShowCompact(width < COMPACT_WIDTH_THRESHOLD);
-      }
-    };
-
-    checkWidth();
-
-    const resizeObserver = new ResizeObserver(checkWidth);
-    if (cardRef.current) {
-      resizeObserver.observe(cardRef.current);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  return showCompact;
-}
-
 export function EventChip({
   arg,
   calendars,

src/components/Event/EventChip/EventChipUtils.tsx

@@ -3,12 +3,14 @@ import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import LockOutlineIcon from "@mui/icons-material/LockOutline";
 import { Box, getContrastRatio } from "@mui/material";
 import moment from "moment";
-import React from "react";
+import React, { useLayoutEffect, useState } from "react";
 import { Calendars } from "../../../features/Calendars/CalendarTypes";
 import { userAttendee } from "../../../features/User/userDataTypes";
 import { EventErrorHandler } from "../../Error/EventErrorHandler";
 import { EVENT_DURATION } from "./EventChip";
 
+const COMPACT_WIDTH_THRESHOLD = 100;
+
 export interface EventChipProps {
   arg: any;
   calendars: Record<string, Calendars>;
@@ -180,3 +182,32 @@ export function DisplayedIcons(IconDisplayed: IconDisplayConfig) {
     </Box>
   );
 }
+
+export function useCompactMode(
+  cardRef: React.RefObject<HTMLDivElement | null>
+): boolean {
+  const [showCompact, setShowCompact] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!cardRef.current) return;
+
+    const checkWidth = () => {
+      const width = cardRef.current?.offsetWidth ?? 0;
+      const newCompact = width < COMPACT_WIDTH_THRESHOLD;
+
+      setShowCompact((prev) => (prev !== newCompact ? newCompact : prev));
+    };
+
+    checkWidth();
+
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(checkWidth);
+    });
+
+    resizeObserver.observe(cardRef.current);
+
+    return () => resizeObserver.disconnect();
+  }, [cardRef]);
+
+  return showCompact;
+}