From e5e104f33ae0d0717f3429a485c5639fd6f6fce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Tue, 3 Dec 2024 12:56:27 +0100
Subject: [PATCH] Update globe-markers animation !

---
 client/src/containers/map/index.tsx                 |  8 ++++++--
 .../containers/map/markers/globe-markers/index.tsx  | 13 +++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index c22b300..62a2072 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -147,8 +147,12 @@ export default function MapContainer() {
         )}
       >
         <LayerManager />
-        <GlobeMarkers />
-        <SelectedStoriesMarker markers={markers} onCloseMarker={() => setMarkers([])} />
+        {!isStoriesPage && (
+          <>
+            <GlobeMarkers />
+            <SelectedStoriesMarker markers={markers} onCloseMarker={() => setMarkers([])} />
+          </>
+        )}
         {isStoriesPage && <StoryMarkers />}
       </Map>
     </div>
diff --git a/client/src/containers/map/markers/globe-markers/index.tsx b/client/src/containers/map/markers/globe-markers/index.tsx
index 7e7da8d..0d226ca 100644
--- a/client/src/containers/map/markers/globe-markers/index.tsx
+++ b/client/src/containers/map/markers/globe-markers/index.tsx
@@ -61,11 +61,12 @@ const GlobeMarkers = () => {
 
   // Animate the size and opacity of the markers
   useEffect(() => {
+    if (typeof window === 'undefined') return;
     const startTime = performance.now();
     const velocity = 3000;
     const minSize = 0.75;
 
-    const interval = setInterval(() => {
+    const animate = () => {
       const progress = ((performance.now() - startTime) % velocity) / velocity;
       const x = Math.abs(Math.sin(progress * Math.PI));
       // Set the opacity interpolating from 0 to 1 and back
@@ -73,12 +74,16 @@ const GlobeMarkers = () => {
       const size = x * (1 - minSize) + minSize;
       // Set the size interpolating from 0.75 to 1 and back
       setSize(size);
-    }, 100);
+      requestAnimationFrame(animate);
+    };
 
-    return () => clearInterval(interval);
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
+    const frame = requestAnimationFrame(animate);
+
+    return () => cancelAnimationFrame(frame);
   }, []);
 
-  return (
+  return pathname.includes('stories') ? null : (
     <Source id="story-markers" type="geojson" data={FeatureCollection}>
       <Layer
         id="story-markers-cluster"