Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix challenge details page blank screen #24

Closed
rishipurwar1 opened this issue Sep 18, 2021 · 15 comments
Closed

Fix challenge details page blank screen #24

rishipurwar1 opened this issue Sep 18, 2021 · 15 comments
Assignees
Labels
bug Something isn't working good first issue Good for newcomers hacktoberfest improvement improvements to UI

Comments

@rishipurwar1
Copy link
Owner

rishipurwar1 commented Sep 18, 2021

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

Screenshot 2021-09-18 at 3 27 07 PM

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.

@rishipurwar1 rishipurwar1 added bug Something isn't working enhancement New feature or request good first issue Good for newcomers hacktoberfest improvement improvements to UI and removed bug Something isn't working enhancement New feature or request labels Sep 18, 2021
@wsameer
Copy link
Contributor

wsameer commented Sep 22, 2021

@rishipurwar1 I can take it up.

@rishipurwar1
Copy link
Owner Author

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

@wsameer
Copy link
Contributor

wsameer commented Sep 23, 2021

@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
Copy link
Owner Author

rishipurwar1 commented Sep 23, 2021

@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
Copy link
Owner Author

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
Copy link
Contributor

wsameer commented Sep 24, 2021

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
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link
Contributor

wsameer commented Sep 24, 2021

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
Copy link
Owner Author

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

@rishipurwar1
Copy link
Owner Author

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

@wsameer
Copy link
Contributor

wsameer commented Sep 24, 2021

@rishipurwar1 how does this look?

image

p.s: static image won't show animation

@rishipurwar1
Copy link
Owner Author

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

@rishipurwar1
Copy link
Owner Author

rishipurwar1 commented Sep 24, 2021

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
Copy link
Contributor

wsameer commented Sep 24, 2021

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%.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers hacktoberfest improvement improvements to UI
Projects
None yet
Development

No branches or pull requests

2 participants