[BUG] Search page rolls back to initial state whenever a new search filter is added/removed.

[gakshita]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Where did you find this bug?

Production

Version of BioDrop (for example "v1.2.3")

v2.84.4

Description

On the search page, when multiple filters are selected whenever a new filter is added/removed the display data rolls back to the initial state for a moment and then displays the new data. For example if I have selected react, then the result will be shown for react then if i also select python then for a few seconds i will see the initial unfiltered search result and then the result for react+python filter

Screenshots

No response

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

No response

[github-actions[bot]]

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/BioDrop/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[amandamartin-dev]

Confirmed this bug is happening and I will unlock, however, I am not able to assign this issue to you as you have not explained your approach to solve this. Can you please add more detail on what you would like to do to address the issue?

[github-actions[bot]]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[pratik9818]

I would like to work on this issue , can you assign this to me . I know I have another issue, but I solved it and sent a pull request , waiting for getting merge.

ℹ️ pratik9818 has some opened assigned issues: 🔧View assigned issues

[jatingodnani]

Interested

[SaraJaoude]

@pratik9818 your PR for your existing issue will need to be merged before we assign another issue to you. This ensures a fair approach and gives everyone an opportunity to contribute.

In any event, as Amanda mentioned (@jatingodnani please also take note of this) - this issue cannot be assigned until whoever is looking to work on it explains their approach to resolving it.

[jatingodnani]

@SaraJaoude, I found the bug in the code. We are rendering two things: 'users' and 'visibleUsers.' 'Users' contains an array of updated users, while 'visibleUsers' contains an array of search results due to a query from the 'users' array. 'VisibleUsers' takes some time to render, so I added a loading indicator. We don't need to render updated users every time; we only show updated users if the input box is empty.

[amandamartin-dev]

@SaraJaoude, I found the bug in the code. We are rendering two things: 'users' and 'visibleUsers.' 'Users' contains an array of updated users, while 'visibleUsers' contains an array of search results due to a query from the 'users' array. 'VisibleUsers' takes some time to render, so I added a loading indicator. We don't need to render updated users every time; we only show updated users if the input box is empty.

Thank you for explaining the approach you would like to take. I will assign this to you to begin work on the proposed solution.

[SaraJaoude]

Unassigning for this reason: https://github.com/EddieHubCommunity/BioDrop/pull/9788#issuecomment-1968536083

[stefanzmf]

I see this is no longer assigned. Noticed it does not have the [good first issue] label, but still has 3 or less points. I managed to setup the env locally and I would like to work on it by doing the following:

• create a reusable Loading component under components folder
• keep the loading flag as a state and set it to true/false inside the fetchUsers method (true when starts, false when ends with success/error)
• when the loading is true render the reusable Loading component, otherwise render the actual users list

Extra:

• maybe add some loading delay support just not to have the loading spinner flickering if the loading time is very short
• get rid of the extra logic of rendering the list with {users.length < usersPerPage && and {users.length > usersPerPage && since const visibleUsers = users.slice(indexOfFirstUser, indexOfLastUser); will always return the visible users in range even if the indexOfLastUser is bigger than the actual users array

[sital002]

@stefanzmf Assigning the issue to you

[stefanzmf]

Opened the PR. Please let me know if there are further steps that needs to be done from my side. Thank you

ℹ️ stefanzmf has some opened assigned issues: 🔧View assigned issues