Replace setTimeout(0) with Svelte's tick() for batching store updates (#122)

* Initial plan

* Initial analysis of Svelte performance issues

Co-authored-by: argyleink <[email protected]>

* Optimize Svelte data flows to reduce input lag

Co-authored-by: argyleink <[email protected]>

* Address code review feedback: fix race condition, improve comments

Co-authored-by: argyleink <[email protected]>

* Replace setTimeout(0) with Svelte's tick() for proper batching

Co-authored-by: argyleink <[email protected]>

* Address code review: improve tick() batching comments and validation order

Co-authored-by: argyleink <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: argyleink <[email protected]>

Author: Copilot

src/components/GradientStops.svelte

@@ -2,6 +2,7 @@
 // @ts-nocheck
   import {flip} from 'svelte/animate'
   import {fade,scale} from 'svelte/transition'
+  import {tick} from 'svelte'
 
   import { tooltip } from 'svooltip'
 
@@ -245,7 +246,11 @@
     dropPos = null
   }
 
-  function slidingPosition(e, stop) {
+  // Batched update for sliding position to reduce store updates during rapid slider changes
+  // Uses Svelte's tick() to defer store update until after pending state changes
+  let slidingPending = false
+  async function slidingPosition(e, stop) {
+    // Apply position sync immediately (mutates the stop object directly)
     const range = [
       stop.position1 + 1,
       stop.position1 + 2,
@@ -255,7 +260,15 @@
     if (range.includes(stop.position2)) {
       stop.position2 = stop.position1
     }
-    $gradient_stops = [...$gradient_stops]
+    // Schedule a single batched store update via Svelte's tick()
+    // Multiple rapid calls will mutate stops synchronously, but only one
+    // store update fires after tick() resolves - capturing all mutations
+    if (!slidingPending) {
+      slidingPending = true
+      await tick()
+      $gradient_stops = [...$gradient_stops]
+      slidingPending = false
+    }
   }
 </script>
 

src/store/layers.ts

@@ -1,4 +1,5 @@
 import { writable, get } from 'svelte/store'
+import { tick } from 'svelte'
 
 import { gradient_type, gradient_space, gradient_interpolation, gradient_stops, gradient_angles } from './gradient'
 import { linear_angle, linear_named_angle } from './linear'
@@ -7,6 +8,13 @@ import { conic_angle, conic_position, conic_named_position } from './conic'
 
 import { buildGradientStrings } from '../utils/gradientString'
 
+// Pending mutations for batching rapid store updates via Svelte's tick()
+let pendingLayerUpdates: ((l: GradientLayer) => void)[] = []
+// Track the target layer index when updates are queued to prevent applying to wrong layer
+let pendingLayerIndex: number | null = null
+// Track whether a tick-based flush is already scheduled
+let flushScheduled = false
+
 // Minimal layer shape mirroring the single-store shape
 export type GradientLayer = {
   id: string
@@ -40,7 +48,7 @@ function snapshotFromStores(): GradientLayer {
     type: get(gradient_type),
     space: get(gradient_space),
     interpolation: get(gradient_interpolation),
-    stops: JSON.parse(JSON.stringify(get(gradient_stops))),
+    stops: structuredClone(get(gradient_stops)),
     linear: {
       named_angle: get(linear_named_angle),
       angle: get(linear_angle),
@@ -81,30 +89,78 @@ function applyLayerToStores(layer: GradientLayer) {
     conic_named_position.set(layer.conic.named_position)
     conic_position.set({ ...layer.conic.position })
 
-    gradient_stops.set(JSON.parse(JSON.stringify(layer.stops)))
+    gradient_stops.set(structuredClone(layer.stops))
   }
   finally {
     // release in next microtask to let subscribers flush
     queueMicrotask(() => { isApplyingLayerToStores = false })
   }
 }
 
-function updateActiveLayer(mutator: (l: GradientLayer) => void) {
+// Flush pending layer updates - called via tick() to batch multiple store changes
+async function flushPendingUpdates() {
+  // Wait for Svelte to finish processing current reactive updates
+  await tick()
+  
+  // Capture state AFTER tick() resolves - this ensures all synchronous updates
+  // that triggered before the await are included
+  const targetIdx = pendingLayerIndex
+  const updates = pendingLayerUpdates
   const list = get(layers)
-  const idx = get(active_layer_index) ?? 0
-  if (!list.length || idx < 0 || idx >= list.length) return
+  
+  // Reset state to allow new batches to form
+  pendingLayerUpdates = []
+  flushScheduled = false
+  pendingLayerIndex = null
+  
+  // Verify we have updates and target layer still exists and is valid
+  if (!updates.length || targetIdx === null || !list.length || targetIdx < 0 || targetIdx >= list.length) {
+    return
+  }
+  
   const copy = [...list]
-  const layer = { ...copy[idx],
-    linear: { ...copy[idx].linear },
-    radial: { ...copy[idx].radial, position: { ...copy[idx].radial.position } },
-    conic: { ...copy[idx].conic, position: { ...copy[idx].conic.position } },
+  const layer = { ...copy[targetIdx],
+    linear: { ...copy[targetIdx].linear },
+    radial: { ...copy[targetIdx].radial, position: { ...copy[targetIdx].radial.position } },
+    conic: { ...copy[targetIdx].conic, position: { ...copy[targetIdx].conic.position } },
   }
-  mutator(layer)
+  
+  // Apply all pending mutations in order
+  for (const m of updates) {
+    m(layer)
+  }
+  
   layer.cachedCss = buildGradientStrings(layer)
-  copy[idx] = layer
+  copy[targetIdx] = layer
   layers.set(copy)
 }
 
+// Batch multiple rapid store updates into a single layer update to reduce renders
+function updateActiveLayer(mutator: (l: GradientLayer) => void) {
+  const currentIdx = get(active_layer_index) ?? 0
+  
+  // If layer changed since pending updates were queued, discard stale updates
+  if (pendingLayerIndex !== null && pendingLayerIndex !== currentIdx) {
+    pendingLayerUpdates = []
+    pendingLayerIndex = null
+  }
+  
+  // Track which layer these updates are for
+  if (pendingLayerIndex === null) {
+    pendingLayerIndex = currentIdx
+  }
+  
+  pendingLayerUpdates.push(mutator)
+  
+  // Schedule a flush via Svelte's tick() if not already scheduled
+  // tick() returns a promise that resolves after pending state changes are applied
+  // All synchronous store subscriptions will add their mutators before tick() resolves
+  if (!flushScheduled) {
+    flushScheduled = true
+    flushPendingUpdates()
+  }
+}
+
 // Public API
 export function addLayer({ seed = 'duplicate', position = 'top' as 'top' | 'bottom' } = {}) {
   const base = seed === 'duplicate' ? snapshotFromStores() : defaultLayer()
@@ -290,4 +346,5 @@ radial_position.subscribe(v => { if (!isApplyingLayerToStores) updateActiveLayer
 conic_angle.subscribe(v => { if (!isApplyingLayerToStores) updateActiveLayer(l => { l.conic.angle = v as any }) })
 conic_named_position.subscribe(v => { if (!isApplyingLayerToStores) updateActiveLayer(l => { l.conic.named_position = v }) })
 conic_position.subscribe(v => { if (!isApplyingLayerToStores) updateActiveLayer(l => { l.conic.position = { ...(v as any) } }) })
-gradient_stops.subscribe(v => { if (!isApplyingLayerToStores) updateActiveLayer(l => { l.stops = JSON.parse(JSON.stringify(v)) }) })
+// Use structuredClone for a faster deep clone than JSON.parse/stringify
+gradient_stops.subscribe(v => { if (!isApplyingLayerToStores) updateActiveLayer(l => { l.stops = structuredClone(v) }) })