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
No fields configured for issues without a type.

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions