From 2b9e9107e38053c1142ed9769c48c5f706ba37a9 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 17:36:36 +0000
Subject: [PATCH] fix: Lightning animation only for new strikes, not all
 markers

Same issue as earthquakes - all lightning markers were continuously
animating instead of just new strikes.

Fix:
- Remove infinite animation from .lightning-strike CSS class
- All markers start with static 'lightning-strike' class
- For new strikes: add marker to map first, then animate
- Wait 10ms for DOM element, then add 'lightning-strike-new' class
- Remove animation class after 0.8s (animation duration)
- Added try/catch with console.warn for safety
- Remove duplicate marker.addTo(map) call

Result:
- New strikes: Flash animation (0.8s) + pulse ring (2s)
- After animation: Marker becomes static
- Old strikes: No animation, always static
---
 src/plugins/layers/useLightning.js | 31 ++++++++++++++++++++++++++----
 src/styles/main.css                | 15 ++-------------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/plugins/layers/useLightning.js b/src/plugins/layers/useLightning.js
index d47f716..bfe81a8 100644
--- a/src/plugins/layers/useLightning.js
+++ b/src/plugins/layers/useLightning.js
@@ -143,7 +143,7 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
       // Size based on intensity (5-20px)
       const size = Math.min(Math.max(intensity / 10, 5), 20);
       
-      // Create lightning bolt marker
+      // Create lightning bolt marker - start with static class
       const marker = L.circleMarker([lat, lon], {
         radius: size / 2,
         fillColor: color,
@@ -151,11 +151,34 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         weight: isNew ? 3 : 1,
         opacity: opacity,
         fillOpacity: opacity * (isNew ? 1.0 : 0.7),
-        className: isNew ? 'lightning-strike-new' : 'lightning-strike'
+        className: 'lightning-strike'
       });
       
-      // Add pulsing animation for new strikes
+      // Add to map first
+      marker.addTo(map);
+      
+      // Add pulsing animation for new strikes ONLY
       if (isNew) {
+        // Wait for DOM element to be created, then add animation class
+        setTimeout(() => {
+          try {
+            if (marker._path) {
+              marker._path.classList.add('lightning-strike-new');
+              
+              // Remove animation class after it completes (0.8s)
+              setTimeout(() => {
+                try {
+                  if (marker._path) {
+                    marker._path.classList.remove('lightning-strike-new');
+                  }
+                } catch (e) {}
+              }, 800);
+            }
+          } catch (e) {
+            console.warn('Could not animate lightning marker:', e);
+          }
+        }, 10);
+        
         // Create pulsing ring effect
         const pulseRing = L.circle([lat, lon], {
           radius: 30000, // 30km radius in meters
@@ -201,7 +224,7 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         </div>
       `);
       
-      marker.addTo(map);
+      // Already added to map above (before animation)
       newMarkers.push(marker);
     });
 
diff --git a/src/styles/main.css b/src/styles/main.css
index d5bf2c5..99a8b4f 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -834,20 +834,9 @@ body::before {
   animation: lightning-flash 0.8s ease-out;
 }
 
-/* Subtle pulse for regular lightning markers */
-@keyframes lightning-subtle-pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 0.7;
-  }
-  50% {
-    transform: scale(1.15);
-    opacity: 0.9;
-  }
-}
-
+/* No animation for regular lightning markers */
 .lightning-strike {
-  animation: lightning-subtle-pulse 3s ease-in-out infinite;
+  /* Static, no animation */
 }
 
 /* Lightning stats panel styling */