search

carolinaknoll / awesome-gamified

:eyeglasses: Awesome Gamified - See your progress and save awesome links you've already seen!
https://carolinaknoll.github.io/awesome-gamified/
MIT License
73 stars 20 forks source link

[Loading] Show a loading transition when requesting a new README list #23

Closed carolinaknoll closed 4 years ago

carolinaknoll commented 4 years ago

Currently, when the user clicks a README list to read it, it takes a while for it to finally load and be displayed to the user.

It would be great to have a loading element that can visually explain to the user: 'Hey, I know you just clicked a README list, but it will take a moment to load so just wait a bit".

Ideally, it can be a simple round spinner element that is shown when a state prop isLoading is true, and is hidden then with prop is false. But if you have some more experience with loading animations/elements, feel free to create something different if you'd like.

As an example, you can create a method and use the axios request/response to handle the state prop changes.

Aditionally, maybe this link will help! 😄

Thank you, you rock! 🚀

RizkyRajitha commented 4 years ago

can i do this one sir in topic-list.js file 1.add new variable to state to keep track of loading

  1. change the variable inside the axios method axios.get(https://api.github.com/repos/${this.props.clickedTopic}/readme)

  2. conditional render the loader

is this process right sir.

carolinaknoll commented 4 years ago

Sure, @RizkyRajitha 🚀

I will assign you and mark this issue as taken so that you can safely work on it.

RizkyRajitha commented 4 years ago

i created two loaders,

https://codesandbox.io/embed/bitter-grass-wqpnt

and also i think we need to use 2 loader , because we have dark mode . a full white loader wont be visible in normal mode

let me know what is better , or anything i can change (in wordings etc ) . thank you.

carolinaknoll commented 4 years ago

Hello @RizkyRajitha your loaders look awesome! 🚀

I think the first one (the one with "WORKINGONIT") is the one to go. We can always change it's color for it to work well in both dark/white themes, so don't worry too much about it now.

I just ask for you to create a new css file named loader.css in src\assets\styles inside the project, and put your loader's styles in there, just like you did on the codesandbox website. Afterwards, just make sure to create a reference to your new loader.css file inside src\index.css.

If you are having trouble with using React or State, you can just create a PR with the loader or your current progress, and I will finish it from where you left off.

Thank you for your contribution! 🚀

RizkyRajitha commented 4 years ago

ok @carolinaknoll
i am trying to make space between "workingonit" , but so far no good , i will add try , and make a pr with the changes .

RizkyRajitha commented 4 years ago

hi @carolinaknoll we are getting a 403 in github api . git

carolinaknoll commented 4 years ago

It's okay @RizkyRajitha, if you keep trying and see that adding spaces isn't possible, just commit the loader without the spaces.

You don't need to rush it to send your PR. Take your time, and when you feel like it, commit and open your PR. It can be today, tomorrow or any day. Just take your time and try to create something complete. 😄

RizkyRajitha commented 4 years ago

ok @carolinaknoll
i will make the pr once api is working again , so i can test the loader. thank you ma'am .

carolinaknoll commented 4 years ago

About your 403 Forbidden error, @RizkyRajitha this is weird, I just checked here and it isn't happening with me. It doesn't happen both with dev and live versions of the project.

Have you tried clearing your browser cache? There are some instructions on what to do here https://www.howtogeek.com/357785/what-is-a-403-forbidden-error-and-how-can-i-fix-it/

Thank you! I hope this helps.

RizkyRajitha commented 4 years ago

@carolinaknoll somehow 403 was gone . i was able to conditionally render the loader an now working fine , it is displaying as a overlay . i tried to add spaces to "workingonit" but that didn't worked .

i will make the pr with this work

thank you @carolinaknoll

carolinaknoll commented 4 years ago

I will be closing this, since https://github.com/carolinaknoll/awesome-gamified/pull/25 was merged.

Thank you very much for contributing to the project! 🚀

RizkyRajitha commented 4 years ago

thank you @carolinaknoll , for supporting me to understand the process in contribution , since i am a beginner to open source community . very much happy to help you again . thank you !

carolinaknoll commented 4 years ago

No problem, @RizkyRajitha you did everything correctly and your code worked well.

There are some minor details that I will be commiting soon, but these are personal decisions and don't involve what you did.

You made a nice contribution to the project. 😄

Thank YOU! 😄