catalog: hydrate sort dropdown + density slider from localStorage before first paint

1e6fa79270239f9996ec08adba641e9e65443ec9 · 2026-05-19 21:50:31 -0700 · SteveStudio2

Density already read its saved value but the apply() races the initial --cols:5
emitted in CSS, so users with a saved density saw a brief flash. Add a clear
"before first paint" comment to lock the ordering.

Sort dropdown was write-only — change events persisted to localStorage but a
fresh /catalog visit always rendered with the server's selected="newest". Now,
when the URL has no ?sort= override, the dropdown hydrates from localStorage
(validated against the known option set) so the user's last choice surfaces.
The form still posts ?sort=<value> on next change so the server-rendered list
matches what the dropdown shows. Pure client-side; catalog query, sortProducts,
and product resolution untouched.

Fleet-wide change since render.js is the shared template for all 44 sites.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M shared/render.js

Diff

commit 1e6fa79270239f9996ec08adba641e9e65443ec9
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 19 21:50:31 2026 -0700

    catalog: hydrate sort dropdown + density slider from localStorage before first paint
    
    Density already read its saved value but the apply() races the initial --cols:5
    emitted in CSS, so users with a saved density saw a brief flash. Add a clear
    "before first paint" comment to lock the ordering.
    
    Sort dropdown was write-only — change events persisted to localStorage but a
    fresh /catalog visit always rendered with the server's selected="newest". Now,
    when the URL has no ?sort= override, the dropdown hydrates from localStorage
    (validated against the known option set) so the user's last choice surfaces.
    The form still posts ?sort=<value> on next change so the server-rendered list
    matches what the dropdown shows. Pure client-side; catalog query, sortProducts,
    and product resolution untouched.
    
    Fleet-wide change since render.js is the shared template for all 44 sites.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 shared/render.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/shared/render.js b/shared/render.js
index c22328c..85e2e24 100644
--- a/shared/render.js
+++ b/shared/render.js
@@ -330,11 +330,19 @@ ${script(cfg)}
 (function(){
   var dk='${cfg.slug}_density',sk='${cfg.slug}_sort';
   var d=document.getElementById('densSel'),g=document.getElementById('grid');
+  // hydrate density from localStorage BEFORE first paint (no flash from 5 → saved)
   var sv=localStorage.getItem(dk);if(sv)d.value=sv;
   function apply(){g.style.setProperty('--cols',d.value);}
   d.addEventListener('input',function(){apply();localStorage.setItem(dk,d.value);});
   apply();
+  // hydrate sort dropdown from localStorage when URL has no ?sort= override
+  // (so the dropdown shows the user's last choice on a fresh /catalog visit)
   var ss=document.getElementById('sortSel');
+  var ssSaved=localStorage.getItem(sk);
+  if(ssSaved && !/[?&]sort=/.test(location.search)){
+    var ok=Array.prototype.some.call(ss.options,function(o){return o.value===ssSaved;});
+    if(ok)ss.value=ssSaved;
+  }
   ss.addEventListener('change',function(){localStorage.setItem(sk,ss.value);});
 })();
 </script>

← febdfbc chore: broaden .gitignore — snapshot/editor cruft (*.bak, *. · back to Dw Domain Fleet · shared/render.js: universal hover-preview — stamp --card-bg aa83057 →