Fix challenge details page blank screen

[rishipurwar1]

About the bug

The challenge details page should show a loading state instead of a blank page while content is loading.

To Reproduce

Steps to reproduce the behavior:

1. Go to any of the challenge details pages and see the difference between the loading state and after loading state.
2. See an error

Expected behavior

It should show a loading animation(either an SVG loader or a skeleton loading animation) to fill up a blank space, so users can have a better user experience.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser chrome, safari, and Mozilla firefox

If Anyone wants to work on this task, please let me know in the comment.

[wsameer]

@rishipurwar1 I can take it up.

[rishipurwar1]

@wsameer assigned to you.
Please update your fork repo because I made some changes to the main branch.

[wsameer]

@rishipurwar1 I am installing the APP and getting this fire-base error?

[2021-09-23T14:18:47.370Z] @firebase/firestore: Firestore (7.24.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=not-found]: The project coding-space-ed1c3 does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database. Please visit http://console.cloud.google.com to create a project or https://console.cloud.google.com/datastore/setup?project=coding-space-ed1c3 to add a Cloud Datastore or Cloud Firestore database. Note that Cloud Datastore or Cloud Firestore always have an associated App Engine app and this app must not be disabled.

any help here?

[rishipurwar1]

@rishipurwar1 I am installing the APP and getting this fire-base error?

[2021-09-23T14:18:47.370Z] @firebase/firestore: Firestore (7.24.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=not-found]: The project coding-space-ed1c3 does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database. Please visit http://console.cloud.google.com to create a project or https://console.cloud.google.com/datastore/setup?project=coding-space-ed1c3 to add a Cloud Datastore or Cloud Firestore database. Note that Cloud Datastore or Cloud Firestore always have an associated App Engine app and this app must not be disabled.

any help here?

when did you get this error during npm install or npm start?

[rishipurwar1]

If you haven't created your firebase project yet, I can give you access to our development firebase project then It would be easy for you to work.
Share your email id here on you can dm me on Twitter or LinkedIn

And please go through the readme.md file.

[wsameer]

If you haven't created your firebase project yet, I can give you access to our development firebase project then It would be easy for you to work.
Share your email id here on you can dm me on Twitter or LinkedIn

And please go through the readme.md file.

I have pinged you on Twitter. Everything is set-up as per Readme.md, just the credentials to development firebase project are remaining.

[rishipurwar1]

If you haven't created your firebase project yet, I can give you access to our development firebase project then It would be easy for you to work.
Share your email id here on you can dm me on Twitter or LinkedIn
And please go through the readme.md file.

I have pinged you on Twitter. Everything is set-up as per Readme.md, just the credentials to development firebase project are remaining.

Just added you to the firebase project.

[rishipurwar1]

Please share the gif/image of the changes before committing your code.
and I would like to know how are you going to fix this?

[wsameer]

Please share the gif/image of the changes before committing your code.
and I would like to know how are you going to fix this?

I see that you have added a spinner component already. Would you want me to reuse that?

[rishipurwar1]

I think it'll not look good on the UI.
We need some kind of rocket loading animation.

[rishipurwar1]

Hey @wsameer
I just added a rocket loader Lottie file. You can use that.

[wsameer]

@rishipurwar1 how does this look?

p.s: static image won't show animation

[rishipurwar1]

@wsameer It looks good but I think you need to decrease the size of the loader a little bit.

[rishipurwar1]

Just to confirm are you using the Lottie component from the react-lottie npm package?
I implemented all the Lottie animation using this package.

[wsameer]

Just to confirm are you using the Lottie component from the react-lottie npm package?
I implemented all the Lottie animation using this package.

Yeah, I am using that only. Also, will reduce the size by 30%.