hydrate saved sort BEFORE first grid load — first paint matches user's last choice

1106b8ac0286d6e3cae85d9b812851ecc8f7ab4c · 2026-05-25 21:35:45 -0700 · Steve

Files touched

M public/index.html

Diff

commit 1106b8ac0286d6e3cae85d9b812851ecc8f7ab4c
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon May 25 21:35:45 2026 -0700

    hydrate saved sort BEFORE first grid load — first paint matches user's last choice
---
 public/index.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6c88ff7..b4b86b2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -497,12 +497,15 @@ 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 (sort hydrates in the sort-select wire-up below).
+// DW STANDARD: hydrate saved view + sort BEFORE the first grid load so first
+// paint already reflects the user's saved sort, not the default 'newest'.
 (function(){
   try {
     const savedView = localStorage.getItem(HOSTKEY + '_view');
     if (savedView === 'list' || savedView === 'grid') state.view = savedView;
     document.documentElement.dataset.view = state.view;
+    const savedSort = localStorage.getItem(HOSTKEY + '_sort');
+    if (savedSort) state.sort = savedSort;
   } catch(e){}
 })();
 const LABELS = {"all":"All"};
@@ -1050,9 +1053,15 @@ loadGridPage();
   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;
+  // state.sort already hydrated from localStorage in the pre-load block above.
+  // Sync the <select> element to match; if state.sort isn't a known option,
+  // fall back to the select's current value.
+  if (typeof state !== 'undefined' && state.sort &&
+      [...sortSel.options].some(o => o.value === state.sort)) {
+    try { sortSel.value = state.sort; } catch(e){}
+  } else if (typeof state !== 'undefined') {
+    state.sort = sortSel.value;
+  }
   sortSel.addEventListener('change', e => {
     const v = e.target.value;
     try { localStorage.setItem(KEY, v); } catch(e){}

← 6edbf1a /api/facets: counts + total reflect q/aesthetic/vendor filte · back to Silverleafwallpaper · add 404-guard middleware (JSON for /api/*, lightweight HTML 326d06d →