Manage loading state for home and list views

[jtkabenni]

For an example of how to fill this template out, see this Pull Request.

Description

Fixing loading state bug for home and list views.

• returns loading div in home and list views when data has not been loaded
• update useShoppingLists and useShoppingListData functions in firebase.js to return loading state
• updated lists and addListItem tests to account for new prop structure

Related Issue

#70

Acceptance Criteria

Type of Changes

Bug fix.

Updates

Before

https://www.loom.com/share/d7a73a6da0f74615bc3e212bc5af09d6?sid=ec3d28c6-1d31-483c-9e45-6f8885fa8535

After

https://www.loom.com/share/52570b94b8bd4d10b06b9830c73fdc17?sid=f0804d01-db37-4c6f-9af2-6f3bd4e4892c

Testing Steps / QA Criteria

[github-actions]

Visit the preview URL for this PR (updated for commit e769629):

https://tcl-67-smart-shopping-list--pr77-bug-loading-state-xajf2gkf.web.app

_{(expires Tue, 02 Apr 2024 05:18:36 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1dc6f6876568bd8a1c97781eec7984835c207f7c}

[flbarfield]

I noticed that if the user isn't signed in yet, the "loading list" status is on.

Perhaps it should have some alternative displays until that condition is met?
Or maybe just display the list section, but with no list items?

Other than that, works great!

[jtkabenni]

I noticed that if the user isn't signed in yet, the "loading list" status is on.

Perhaps it should have some alternative displays until that condition is met? Or maybe just display the list section, but with no list items?

Other than that, works great!

@flbarfield Yeah I actually did add that as another issue #63 to manage the UI for before a user logs in. I think we should probably hide all of the elements on that page other than a login form.