Skip to content

Enhance OSS programs search UX with loading, skeletons, and tag autoc…#335

Open
Dampipal wants to merge 1 commit intoapsinghdev:mainfrom
Dampipal:enhancement/oss-programs-search-and-tags
Open

Enhance OSS programs search UX with loading, skeletons, and tag autoc…#335
Dampipal wants to merge 1 commit intoapsinghdev:mainfrom
Dampipal:enhancement/oss-programs-search-and-tags

Conversation

@Dampipal
Copy link

@Dampipal Dampipal commented Feb 3, 2026

Closes #334

What’s changed

  • Added a lightweight loading state for OSS Programs search and tag filtering.
  • Introduced skeleton placeholders to improve perceived performance.
  • Improved tag filter UX with auto-highlighted first suggestion and keyboard navigation.

Why

These changes provide smoother visual feedback during search and filtering, reduce abrupt UI changes, and improve accessibility for keyboard users without introducing breaking changes.

Summary by CodeRabbit

Release Notes

  • New Features

    • Added loading skeleton UI that displays while filtering and searching through OSS programs
    • Introduced keyboard navigation support for tag filter dropdown with arrow keys for navigation and Enter to select tags
  • Style

    • Enhanced tag filter component with improved styling, transitions, and input layout for better user experience

@vercel
Copy link

vercel bot commented Feb 3, 2026

@Dampipal is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 3, 2026

📝 Walkthrough

Walkthrough

The PR enhances OSS Programs dashboard filtering by introducing loading states and skeleton placeholders that display during search and tag filter operations. A new ProgramCardSkeleton component provides visual feedback while results load. The TagFilter component gains keyboard navigation support (arrow keys and Enter), and ProgramsList manages a synthetic 200ms loading delay to show these placeholders.

Changes

Cohort / File(s) Summary
Loading State & Skeleton UI
apps/web/src/components/oss-programs/ProgramCardSkeleton.tsx, apps/web/src/components/oss-programs/index.ts
New memoized ProgramCardSkeleton component renders placeholder UI with title, description, and region skeletons. Export added to module index.
Main List with Loading Logic
apps/web/src/app/(main)/dashboard/oss-programs/ProgramsList.tsx
Added loading state management with 200ms synthetic delay via useEffect. Conditionally renders ProgramCardSkeleton during loading or actual ProgramCard items when ready. Integrated isLoading logic into search and tag change handlers.
Tag Filter Keyboard Navigation
apps/web/src/components/oss-programs/TagFilter.tsx
Introduced keyboard navigation: ArrowDown/ArrowUp cycle through tags via activeIndex, Enter selects active tag. Added input/container styling refinements, per-item active highlighting, and activeIndex reset logic on filter or tag list changes.

Sequence Diagram

sequenceDiagram
    actor User
    participant TagFilter
    participant ProgramsList
    participant LoadingState
    participant Display

    User->>TagFilter: Type/Select Tag
    TagFilter->>ProgramsList: Trigger filter change
    ProgramsList->>LoadingState: Set isLoading = true
    LoadingState->>Display: Render ProgramCardSkeleton
    Note over Display: 200ms delay
    LoadingState->>LoadingState: useEffect completes
    LoadingState->>Display: Set isLoading = false
    Display->>Display: Render ProgramCard results
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • opensox#304: Modifies the same OSS Programs UI components (ProgramsList, TagFilter) with memoization and async loading handlers that may interact with these loading state changes.

Poem

🐰 A rabbit hops through filtered lists with glee,
Skeletons dance while searches come to be,
Arrow keys guide through tags both near and far,
The UI feels responsive—a shining star!

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and specifically describes the main enhancement—adding loading states, skeleton placeholders, and tag autocomplete features to improve OSS programs search UX.
Linked Issues check ✅ Passed The PR implements all coding-related requirements from issue #334: loading state during search/tag changes, skeleton placeholders during loading, auto-highlighting first tag suggestion, and keyboard navigation for tag selection.
Out of Scope Changes check ✅ Passed All changes are directly scoped to the linked issue #334 objectives; no unrelated modifications to other features, APIs, or data logic were introduced.

✏️ 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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Improve OSS Programs search & tag filtering UX with loading and autocomplete

1 participant