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

stefanzmf · 2024-03-13T12:17:57Z

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)

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

Screenshots

Screen.Recording.2024-03-13.at.14.13.33.mov

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

- add aria specific attributes - use items-center and justify-center in combination with h-full in order to show it in the center of the container - use hardcoded fa-spinner icon in combination with animate-spin class for a nicer effect

- set isLoading flag and set it based on the fetchUsers status and contitional render content based on its value

- check add extra logic complexity and code duplication - the visibile users still contains all the users if the users length is smaller than usersPerPage

…e time

eddiejaoude

Thank you 👍

stefanzmf added 4 commits March 13, 2024 13:47

Add reusable Loading component:

1999bbe

- add aria specific attributes - use items-center and justify-center in combination with h-full in order to show it in the center of the container - use hardcoded fa-spinner icon in combination with animate-spin class for a nicer effect

Add Loading spinner for search page:

d93c255

- set isLoading flag and set it based on the fetchUsers status and contitional render content based on its value

Simplify logic for render visible users:

8a06b9c

- check add extra logic complexity and code duplication - the visibile users still contains all the users if the users length is smaller than usersPerPage

Extend conditional render to ensure only one component is shown at th…

96e077b

…e time

github-actions bot added the issue linked Pull Request has issue linked label Mar 13, 2024

eddiejaoude approved these changes Jun 8, 2024

View reviewed changes

eddiejaoude changed the base branch from main to contributions June 8, 2024 10:43

eddiejaoude merged commit 5f2143e into EddieHubCommunity:contributions Jun 8, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

stefanzmf commented Mar 13, 2024

eddiejaoude left a comment

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

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

Conversation

stefanzmf commented Mar 13, 2024

Fixes Issue

Changes proposed

Check List (Check all the applicable boxes)

Screenshots

Note to reviewers

eddiejaoude left a comment

Choose a reason for hiding this comment