Task: Add noscript fallbacks to dynamic data pages #482

New issue

Open

opened 2026-04-16 07:11:14 +00:00 by jjalangtry · 0 comments

jjalangtry commented

2026-04-16 07:11:14 +00:00

(Migrated from github.com)

Problem

The following pages are `'use client'` components that fetch all data in `useEffect`. Without JS they render empty skeletons or a blank screen with no explanation.

Affected Files

Page	File
Memberships Leaderboard	`next/app/(main)/memberships/page.tsx`
Quote Database	`next/app/(main)/qdb/page.tsx`
Library Catalog	`next/app/library/(main)/page.tsx`
Mentor Schedule	`next/app/(main)/mentoring/schedule/page.tsx`

Fix

Each page needs a ` \`\`\`

## Problem The following pages are \`'use client'\` components that fetch all data in \`useEffect\`. Without JS they render empty skeletons or a blank screen with no explanation. ## Affected Files | Page | File | |---|---| | Memberships Leaderboard | \`next/app/(main)/memberships/page.tsx\` | | Quote Database | \`next/app/(main)/qdb/page.tsx\` | | Library Catalog | \`next/app/library/(main)/page.tsx\` | | Mentor Schedule | \`next/app/(main)/mentoring/schedule/page.tsx\` | ## Fix Each page needs a \`<noscript>\` block. Additionally, the **Library search bar** (\`next/components/library/search/SearchBar.tsx\`) uses \`router.push()\` with no \`<form action>\` fallback — a plain HTML form should be added inside \`<noscript>\`: \`\`\`html <noscript> <form action="/library/search"> <input name="query" placeholder="Search the library..." /> <button type="submit">Search</button> </form> </noscript> \`\`\`