Skip to content

Add "no results" component #2

@MathyouMB

Description

@MathyouMB

As a user searching or filtering projects, I want to see a clear message when no results match my query so that I understand the system is working and I should try different filters or keywords.


🧠 Context

Right now, when no projects match the user’s search or selected tags, the project list simply renders empty — with no feedback to the user. This can feel like a bug or confusing silence.

Image

We should create a dedicated NoResults component to render when the project search returns zero results. This will improve usability and make the interface feel more polished.

Something kinda like:

Image


🛠️ Implementation Plan

  1. Create a new component

    • File: components/NoResults.tsx

    • Display a friendly message like:

      No projects found. Try adjusting your search or removing some filters.

    • Optionally include:

      • A reset filters button (if applicable)
      • A fun emoji or graphic
  2. Update the Search component

    • After the project fetch, if projects.length === 0, render <NoResults /> in place of the project list
  3. Style it appropriately

    • Use existing spacing and typography tokens
    • Ensure it looks good in both light and dark mode

✅ Acceptance Criteria

  • A NoResults component exists and is displayed when projects.length === 0
  • The message appears below the search input and tag list

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions