Creat Loading Screen for Legal Rights Page

[CodyGarciaa]

This sprint, you will create a loading screen for the PREA Videos grid page. On first click on this page, it takes the app a couple of seconds to fetch the poster images and titles for each video. This loading screen will help give buffer time to the app so that the screen isn’t blank while app loads. You can find the PREA Videos screen in this folder (the VideoPage folder is for the screen where the actual videos play):

Here are some resources to hopefully help you with your sprint 👍

1. https://blog.logrocket.com/building-splash-screens-react-native/ A blog on how someone built their “splash screen” (loading screen) design for their mobile app.
2. https://github.com/search?q=repo%3Acalblueprint%2Fgirls-write-now%20splash%20screen&type=code This is a previous Blueprint project’s implementation of a “splash screen”. The difference with them is that it only loaded once initially when starting the admin interface. In our case, it should also likely only be loaded once, but after the user loads the “Legal Rights” screen.

I encourage you to use google as there is a lot of resources online, but some good starters is that you will likely have to introduce a new useState in LegalRights that tracks when the data is done loading (likely tie it to the FetchData() function) and then stops showing the loading screen. You can just have a blank placeholder screen for the time being, but if you really want to do more, feel free to implement Kevin’s loading design below or in the Figma!

You got this! and please reach out if you have any questions :)