feat: hide catalog filter without JS, suppress Apply button with JS

danielnaab · danielnaab · commit 1b72e1427c74 · 2026-04-28T14:13:22.000-05:00
Filter form is hidden by default and shown only when JS is active via a
synchronous inline script that adds `class="js"` to &lt;html&gt; before paint,
preventing any flash. Apply button is hidden by the custom element once JS
is available since change-event filtering makes it redundant.
diff --git a/src/design/common/layout.tsx b/src/design/common/layout.tsx
@@ -25,6 +25,7 @@ export function Layout({
         <link rel="icon" href={url('/assets/favicon-192x192.png', config.basePath)} sizes="192x192" type="image/png" />
         <link rel="apple-touch-icon" href={url('/assets/apple-touch-icon.png', config.basePath)} />
         <meta name="msapplication-TileImage" content={url('/assets/mstile-270x270.png', config.basePath)} />
+        <script>{`document.documentElement.classList.add('js')`}</script>
         <script type="module" src={url('/enhancements/register.js', config.basePath)} defer></script>
       </head>
       <body>
diff --git a/src/design/components/catalog-filter/client.ts b/src/design/components/catalog-filter/client.ts
@@ -1,5 +1,6 @@
 class CatalogFilter extends HTMLElement {
   connectedCallback() {
+    this.querySelector<HTMLElement>('[type="submit"]')?.setAttribute('hidden', '')
     this.addEventListener('change', this.apply)
     this.addEventListener('submit', this.preventAndApply)
   }
diff --git a/src/design/components/catalog-filter/styles.css b/src/design/components/catalog-filter/styles.css
@@ -1,9 +1,15 @@
 catalog-filter { display: block; }
 
+/* Hidden until JS confirms it can do something useful */
 .catalog-filter {
+  display: none;
   margin-block-end: var(--space-5);
 }
 
+.js .catalog-filter {
+  display: block;
+}
+
 .catalog-filter fieldset {
   border: 1px solid var(--color-surface-alt);
   border-radius: var(--radius-md);

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`class CatalogFilter extends HTMLElement {`
`2`	`2`	`connectedCallback() {`
	`3`	`+ this.querySelector<HTMLElement>('[type="submit"]')?.setAttribute('hidden', '')`
`3`	`4`	`this.addEventListener('change', this.apply)`
`4`	`5`	`this.addEventListener('submit', this.preventAndApply)`
`5`	`6`	`}`