[#362] Member Search Mobile Forced Refresh

[jesusthecreator017]

Why

There was major mobile layout issues with the new members page since I added pagination, and a bug where a mobile user when searching for a member if they did not type fast enough before the debounce time it would force refresh the page for them making searching basically impossible. This aims to fix those issues!

What

Issue(s): #362

Added layout changes for smaller devices: Selectors, Search bar, Pagination
Instead of showing a single div for the whole page when the data was loading, only show a "loading ... " status in the table so that the search bar doesn't "poof" out of reality kicking mobile users off of the search bar.
Added a first render check to see if a person loads directly into a page that is not 1 ("for whatever reason") so that they aren't automatically kicked back into the first page causing an autorefresh.

Test Plan

Using chrome dev tools to test the mobile formatting, and praying that the mobile keyboard works now.

Images

Checklist

• Database: No schema changes, OR I have contacted the Development Lead to run db:push before merging
• Environment Variables: No environment variables changed, OR I have contacted the Development Lead to modify them on Coolify BEFORE merging.

Summary by CodeRabbit

• UI Improvements

  • Pagination labels now hide on extra-small screens for a cleaner mobile interface.
  • Enhanced responsive layout for member management controls on smaller screens.

• Bug Fixes

  • Search functionality now properly resets pagination to avoid unnecessary navigation.
  • Improved loading and error state displays in member tables for better user feedback.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

This PR updates UI responsiveness in the pagination component and refactors the members table with improved state management, adjusted debounce timing (250ms → 500ms), and better loading/error state handling through triage rendering.

Changes

Cohort / File(s)	Summary
Pagination Responsiveness packages/ui/src/pagination.tsx	Wrapped "Previous" and "Next" text labels in spans with hidden sm:inline class to hide labels on extra-small screens while maintaining icon visibility.
Members Table Refactoring apps/blade/src/app/_components/admin/club/members/members-table.tsx	Added stable refs and render tracking to prevent unnecessary state updates; increased debounce timeout to 500ms; implemented triage rendering pattern for loading/error states; simplified search onChange handler and restructured layout for responsive behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [#332] Blade/member pagination & search #358: Modifies the same Pagination components (packages/ui/src/pagination.tsx) that are updated in this PR for responsive label handling.

Suggested labels

UI

Suggested reviewers

• DVidal1205
• DVidal1205-Crest

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title follows the required format with issue number in brackets and clearly describes the main changes addressing mobile layout issues and search debounce problems.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main
No Hardcoded Secrets	✅ Passed	Examined pagination.tsx and members-table.tsx for hardcoded secrets, API keys, passwords, and tokens. No sensitive credentials found in either file.
Validated Env Access	✅ Passed	Neither modified file uses direct process.env access; both follow codebase conventions by relying on proper imports for environmental configuration.
No Typescript Escape Hatches	✅ Passed	Both modified files pass the TypeScript escape hatch check with zero instances of any type declarations, @ts-ignore/@ts-expect-error comments, and non-null assertions.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch blade/mobile-members-force-refresh

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[DVidal1205]

sensational