Fix (9738): Prevent showing the initial state when changing query [search page] - Githubissues

EddieHubCommunity / BioDrop

Connect to your audience with a single link. Showcase the content you create and your projects in one place. Make it easier for people to find, follow and subscribe.

https://biodrop.io

MIT License

5.73k stars 3.98k forks source link

Fix (9738): Prevent showing the initial state when changing query [search page] #10276

Closed stefanzmf closed 2 months ago

stefanzmf commented 5 months ago

Fixes Issue

Closes #9738

Changes proposed

Add reusable Loading component in the components folder (The Loading is aligned both, vertically and horizontally inside the parent)
Set a local state for handling the loading status (set it to true when the fetchUsers function is called and false when it ends)

Extra:

Remove duplicate logic for rendering the list of the users
Render one piece of content at the time by chaining all the ifs

Check List (Check all the applicable boxes)

[x] My code follows the code style of this project.
[ ] My change requires changes to the documentation.
[ ] I have updated the documentation accordingly.
[x] All new and existing tests passed.
[x] This PR does not contain plagiarized content.
[x] The title of my pull request is a short description of the requested changes.

Screenshots

https://github.com/EddieHubCommunity/BioDrop/assets/1851658/8b2863d9-55a6-4d4f-895d-c4fb85ca19fa

Note to reviewers

Do you think I should include a fix for this warning as well?

./pages/search.js
153:6  Warning: React Hook useEffect has missing dependencies: 'BASE_URL', 'pathname', and 'replace'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps