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

Loading state for page content while loading #98

Closed
3 tasks
Tracked by #115
brandonmcconnell opened this issue Oct 11, 2022 · 18 comments · Fixed by #115
Closed
3 tasks
Tracked by #115

Loading state for page content while loading #98

brandonmcconnell opened this issue Oct 11, 2022 · 18 comments · Fixed by #115
Assignees

Comments

@brandonmcconnell
Copy link
Contributor

brandonmcconnell commented Oct 11, 2022

Most pages in the application do not show any content on the page while loading and simply collapse as if no content is still being processed, even on a relatively fast internet connection. This may confuse users into thinking there is no content to see, who might then leave the page/site before the content is loaded.

In some cases, such as the Talks page, the table does display before the content is ready, however, it shows a placeholder that reads, No items found, which may be even more confusing and inaccurate.

Acceptance criteria

  • Add a loading spinner, where fitting, to indicate that page content is still loading
  • For sections such as the Talks page, either…
  • use a loading spinner on the page, and hide the table altogether, until the data, or lack thereof, is ready to be assessed, or…
  • use placeholder text in place of No items found while the content is still loading to make it clear the data is still loading and not necessarily missing/empty
  • Tech requirement: All of these loading states should be added using React.Suspense.
@brandonmcconnell
Copy link
Contributor Author

@brittanyjoiner15 If you wouldn't mind assigning me, I'd be happy to take this one as well. Otherwise, it could be a great ticket for any willing party. 🙂

@brandonmcconnell
Copy link
Contributor Author

@brittanyjoiner15 In fact, if you wouldn't mind holding off until later to assign this one, I should be able to wrap up my existing ticket before then.

@brittanyjoiner15
Copy link
Owner

@brandonmcconnell sounds good! I agree this is a great issue - will assign to you after we wrap up the other PR!

@brandonmcconnell
Copy link
Contributor Author

@brittanyjoiner15 Sounds good!

@SahilAnower
Copy link
Contributor

SahilAnower commented Oct 13, 2022

@brittanyjoiner15 Can I hop onto this one? Or is it taken 🙂

@brittanyjoiner15
Copy link
Owner

@brandonmcconnell would you mind is @SahilAnower jumps on this one? Or would you prefer it? I know you're waiting on me for PR review on your other issue, so if you want to go ahead and start on this one that's fine, but if you aren't able to start on it, then can @SahilAnower tackle it?

@brandonmcconnell
Copy link
Contributor Author

Sure, he can have this one! Gotta spread the love, right? 😉

@brittanyjoiner15
Copy link
Owner

@brandonmcconnell that's very nice of you! Thanks! @SahilAnower feel free to work on this! Ill assign to you. Please comment in here every couple of days to let me know your progress on it, otherwise if i don't hear anything I will need to reassign. Thanks!

@SahilAnower
Copy link
Contributor

Thanks a lot! I will update you as soon as I produce some fine tuning! 😊

@brittanyjoiner15
Copy link
Owner

@SahilAnower thank!! also, if you want to join, I've started doing some live coding/hacking/reviewing on fridays on a live stream on my youtube channel! if you want to come join and work together, im happy to provide feedback and hang out as we go! planning to go live tomorrow around 12pm EST: https://youtu.be/ljgQIO9r8CI

@brandonmcconnell
Copy link
Contributor Author

@SahilAnower I don't see the comment you posted anymore, but this ticket should not need a global state (context) for managing the loading state. Rather, this should be per component using React Suspense, which does it that way by default. That way, the entire site can show the content that is already available and only show loading spinners/verbiage for content that is still loading.

The official docs for this are pretty good:
https://beta.reactjs.org/apis/react/Suspense#revealing-nested-content-as-it-loads

@brittanyjoiner15
Copy link
Owner

@brandonmcconnell thank you for jumping in because i also saw that comment and then did not see it and totally forgot about it. thanks for jumping in with a helpful response there! I really appreciate it!

@brandonmcconnell
Copy link
Contributor Author

@brittanyjoiner15 Sure thing!

@brandonmcconnell
Copy link
Contributor Author

I looked into it briefly but it's becoming a rabbit hole. I'll circle back to this early next week 🙂

@brittanyjoiner15
Copy link
Owner

@brandonmcconnell ^ liteally me every time i try debugging haha. @SahilAnower let us know if that makes sense or you need more direction there!

@brandonmcconnell
Copy link
Contributor Author

@brandonmcconnell Whoops meant to post that on #99 🤷🏻‍♂️ my bad

@SahilAnower
Copy link
Contributor

spinner-unscreen
@brittanyjoiner15 does this look good for waiting time? Just finishing it up. 😊

@brittanyjoiner15
Copy link
Owner

@SahilAnower just now seeing this comment - but i love it haha very cool and original!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants