hydrate state.sort from localStorage before first grid load (no first-paint flicker)

a401e3269cfd67395f5ff899dde7dcff36893ad6 · 2026-05-25 21:19:50 -0700 · steve

Files touched

M public/index.html

Diff

commit a401e3269cfd67395f5ff899dde7dcff36893ad6
Author: steve <steve@designerwallcoverings.com>
Date:   Mon May 25 21:19:50 2026 -0700

    hydrate state.sort from localStorage before first grid load (no first-paint flicker)
---
 public/index.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0a36026..b25aca9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -494,13 +494,18 @@ const state = { q:'', facet:'all', sort:'newest', view:'grid', page:1, pages:1,
 // Touch device = no hover. Drives tap-to-reveal card behavior.
 const TOUCH = window.matchMedia('(hover: none)').matches;
 const HOSTKEY = location.hostname.replace(/\./g, '_');
-// DW STANDARD: hydrate saved view BEFORE the first grid load.
+// DW STANDARD: hydrate saved view + sort BEFORE the first grid load so the
+// first paint reflects the user's last choice (no flicker / re-fetch).
 (function(){
   try {
     const savedView = localStorage.getItem(HOSTKEY + '_view');
     if (savedView === 'list' || savedView === 'grid') state.view = savedView;
     document.documentElement.dataset.view = state.view;
   } catch(e){}
+  try {
+    const savedSort = localStorage.getItem(HOSTKEY + '_sort');
+    if (savedSort) state.sort = savedSort;
+  } catch(e){}
 })();
 const LABELS = {"all":"All"};
 
@@ -1037,14 +1042,17 @@ loadGridPage();
 })();
 
 
-// DW STANDARD sort-select wire-up (added by fleet patcher)
+// DW STANDARD sort-select wire-up. state.sort is already pre-hydrated above
+// (line ~498) so the first grid fetch reflects the saved sort; here we just
+// mirror the saved value into the <select> + wire the change handler.
 (function(){
   const sortSel = document.getElementById('sortSelect');
   if (!sortSel) return;
   const KEY = location.hostname.replace(/\./g, '_') + '_sort';
-  const saved = localStorage.getItem(KEY);
-  if (saved) { try { sortSel.value = saved; } catch(e){} }
-  if (typeof state !== 'undefined') state.sort = sortSel.value;
+  const saved = (typeof state !== 'undefined' && state.sort) || localStorage.getItem(KEY);
+  if (saved && [...sortSel.options].some(o => o.value === saved)) {
+    try { sortSel.value = saved; } catch(e){}
+  }
   sortSel.addEventListener('change', e => {
     const v = e.target.value;
     try { localStorage.setItem(KEY, v); } catch(e){}

← cd37784 remove p.vendor render on Ideas rail card meta (replace with · back to Micawallpaper · /api/facets total counts FILTERED list (accept q + aesthetic 30ba01a →