feat: #38 add loaders and error handling to Profile and Badge list

[yash-1104github]

Description:

Add real loaders and error handling for Profile and Badge lists
Solve Issue - #38

Changes include:

• Implemented real loader components for both Profile and Badge lists using react lucide icon.

• Display an error message when fetching data fails or the list is empty.

• Styled components using Tailwind CSS for consistent UI.

Benefits:

• Users now see a meaningful loader instead of placeholder content.

• Errors and empty states are clearly communicated, improving usability.

[joelamouche]

Overall great work!

This still looks a bit unfriendly. We should always display "An error occurred, Please try again later or contact support on discord" in yellow with a yellow warning sign. Devs will read error messages from the logs.

Thanks in advance!

[yash-1104github]

@joelamouche Okay , I'll Update it.

[joelamouche]

@yash-1104github I think you forgot to run npm i and commit lock file, which is why CI is failing. Also while you are at it it would be lovely if you could refactor out

<p className="text-2xl text-yellow-600 flex items-center gap-2">
        <span>⚠️</span>
        {"An error occurred, please try again later or contact support on discord"}
      </p>

<p className="text-2xl text-yellow-600 flex items-center gap-2">
        <span>⚠️</span>
        {"An error occurred, please try again later or contact support on discord"}
      </p>

into separate display-error component into component/display-error folder, since they are reused in different files

Thanks in advance!

[yash-1104github]

Okay

[joelamouche]

Great job!