Blank screen between forecast animation frames (VelocityParticleLayer)

[SL-Mar]

Description

When playing the forecast timeline animation (wind or currents), there is a blank/flash between each frame transition. The VelocityParticleLayer destroys and recreates the entire leaflet-velocity canvas layer on every data change instead of using setData() for smooth updates.

Expected Behavior

Smooth, fluid particle animation when advancing through forecast hours — particles should adapt to the new vector field without the canvas being destroyed/recreated.

Root Cause

In VelocityParticleLayer.tsx, the useEffect depends on data and runs full cleanup (remove layer) + recreation on every frame change. The L.velocityLayer.setData() method should be used for data-only updates.

Attempted Fix

Refactored to track prevZoom and prevType refs, using setData() for data-only changes and full recreation only on zoom/type changes. The fix was implemented but Docker build cache prevented it from taking effect. Needs investigation into why --no-cache build didn't pick up the change.

Files

• frontend/components/VelocityParticleLayer.tsx