Loading state bug fix and minor style adjustments

[Hudamabkhoot]

Description

• Moved the laoding state to useShoppingListData to fix the loading spinner issue now it only shows if data are being fetched.
• Fixed the flashing list items in empty lists before it shows Your list is empty. by waiting for the path to be set before navigating.
• Added a button to navigate back to home when No list selected shows in list page.
• Adjusted the spacing between filter and create list inputs and their labels, added an icon in the create list input to match the filter one and added a placeholder text to it.

Type of Changes

bug fix, enhancement,

Updates

Before

After

Testing Steps / QA Criteria

• Do a git pull and git checkout hm-loading-bug-fix
• Open the homepage by running npm start.
• Navigate to the list page.
• The loading spinner now wont show when adding and editing items.

[github-actions]

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

https://tcl-79-smart-shopping-list--pr57-hm-loading-bug-fix-amk4oc7p.web.app

_{(expires Fri, 25 Oct 2024 12:04:33 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}