[$80] Add Loading Indicator when the app is getting data from backend

[LieutenantRoger]

Current:

Currently, when we changed any filter, we will call the API to get the challenge data with latest updated Query

Expected:

When the API is trying to get the data from backend, we should display a loading indicator to let user is aware of that the API is loading data. This can happen when a user visits challenge page initially, or the user changed any filter that causing the reloading of the challenges data.

https://monosnap.com/file/9QoY7B7dgMhz1uNS2NiTcYPwmysEan Please reuse the loading indicator we have implemented when loading a challenge detail page.

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/32598a39-badd-4d9e-9ebd-59c7e5712e84 has been created for this ticket.

This is an automated message for lieutenantroger via Topcoder X

[Gauravseta]

@bug-bash-helper assign

[bug-bash-hunt-helper[bot]]

@Gauravseta 🛑 you have some issues assigned which are not completed yet, see https://github.com/topcoder-platform/micro-frontends-challenges-app/issues/91, https://github.com/topcoder-platform/micro-frontends-challenges-app/issues/90.

As per our Bug Bash rules you may work only at one issue at a time. Please, complete other issues first or unassign yourself before picking up a new issue.

[Gauravseta]

@LieutenantRoger I am unable to assign this issue to myself, due to #90 and #91 even though both issues are completed.

can you please assign this to me? thanks.

also to everyone else, i have started working on this issue and my other both issues are completed.

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/32598a39-badd-4d9e-9ebd-59c7e5712e84 has been assigned to gauravseta.

This is an automated message for lieutenantroger via Topcoder X

[Gauravseta]

@LieutenantRoger thanks

[Gauravseta]

@LieutenantRoger wont be able to complete it hence will see later if available.

[Gauravseta]

@bug-bash-helper unassign

[bug-bash-hunt-helper[bot]]

@Gauravseta ✅ you have been unassigned from this issue.

Now you may pick up another issue which is open for pickup if you like to.

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/32598a39-badd-4d9e-9ebd-59c7e5712e84 gauravseta has been unassigned.

This is an automated message for lieutenantroger via Topcoder X

[rashmi73]

@bug-bash-helper assign

[bug-bash-hunt-helper[bot]]

@rashmi73 ✅ you are now assigned to this issue and have 12 hours to complete it.

As soon as you are done, please, make a comment like below, including the link to the pull request:

@bug-bash-helper <link to PR> is ready for review

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/32598a39-badd-4d9e-9ebd-59c7e5712e84 has been assigned to rashmi73.

This is an automated message for lieutenantroger via Topcoder X

[LieutenantRoger]

@rashmi73 since you didn't provide a PR for 3 days, I'm releasing this ticket to other members

[LieutenantRoger]

Challenge https://www.topcoder.com/challenges/32598a39-badd-4d9e-9ebd-59c7e5712e84 rashmi73 has been unassigned.

This is an automated message for lieutenantroger via Topcoder X

[fikzzzy]

@bug-bash-helper assign

[bug-bash-hunt-helper[bot]]

@fikzzzy ✅ you are now assigned to this issue and have 12 hours to complete it.

As soon as you are done, please, make a comment like below, including the link to the pull request:

@bug-bash-helper <link to PR> is ready for review

[fikzzzy]

@bug-bash-helper https://github.com/topcoder-platform/micro-frontends-challenges-app/pull/199 is ready for review

[bug-bash-hunt-helper[bot]]

@fikzzzy ✅ this issue is marked as Ready for Review.

Now you may pick up another issue which is open for pickup if you like to.

[codejamtc]

@LieutenantRoger Please check again, when I switch to a slow network and switch between the pages I am getting the No challenges were found. You can try changing your search parameters.

https://user-images.githubusercontent.com/42398485/143455827-bbfddc6b-342c-4b7b-af1e-24ea2123d49d.mp4

When I first load the challenge list I am getting the loading animation

but when I apply the filters and switch between different sections I am getting a different loading animation

[fikzzzy]

@codejamtc @LieutenantRoger it is expected since I follow the behaviour of topcoder.com/challenges. So the first when we load the application show circle loading animation then when we load the challenges show shimmer animation

[codejamtc]

@fikzzzy Above is fine; possible to check the below behaviour

when I switch to a slow network and switch between the pages I am getting the No challenges were found. You can try changing your search parameters.

[codejamtc]

@LieutenantRoger Shall I create a different ticket for the above?

[LieutenantRoger]

No, @codejamtc I think the issue is caused by the fix.

• @fikzzzy it seems the loading flag is not working properly when we switch the pages, the loading animator is fine to me as well. But can you please take a look for the issue that the filter is always reset to page 1 when we clicked page 2 or 3 ? I think it should display the loading animator as well when we switch to page 2 or 3. Currently it shows Not Found, then reset to page 1.

This issue wasn't there before, thanks.

[LieutenantRoger]

Please re-create a branch, since your previous PR has been merged. :)

[fikzzzy]

@bug-bash-helper https://github.com/topcoder-platform/micro-frontends-challenges-app/pull/200 is ready for review

[bug-bash-hunt-helper[bot]]

@fikzzzy ✅ this issue is marked as Ready for Review.

Now you may pick up another issue which is open for pickup if you like to.

[codejamtc]

Fixed :ok:

https://user-images.githubusercontent.com/42398485/143663980-1b9ccf59-c1cf-4267-a073-53a697f1f92d.mp4

[codejamtc]

Verified in Prod :ok:

https://user-images.githubusercontent.com/42398485/143865515-4610b2e6-5a52-4b8f-9538-c823556c9697.mp4