Dashboard big screen support with staggered grid layout for cards

[JorgeMucientes]

Closes: #13079

Description

An attempt to support big screens for dashboard Tab. I simplified the xml layout and refactored the implementation to use LazyColumn for smaller screens and LazyStaggeredGrid for big screen. The problem is LazyStaggeredGrid is bugged in several way and the support

Changes added:

• Removed usage of NestedScrollView. This was needed in order to add Lazy column and grid and not run into nested scroll issue:

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.

• Use Composable LazyColumn and LazyStaggeredGrid, to load views only when they are visible, instead of loading all the cards at once.
• Refactored pull to refresh implementation to use Composable approach instead of relying in our custom view. This was needed to work with the composable Lazy components.
• Adjusted Lazy column and grid to coordinate with the collapsing toolbar. Only to find out that once again LazyStaggeredGrid component is buggy and won't work as expected.

I will go deeper into the issues in P2 post:

Phone screen using Lazy column works like a charm:

phoneWorksWell.mp4

Tablet screen using LazyStaggered grid breaks the pull to refresh implementation as well as the collapsing toolbar. Pitty the component is bugged:

IssuesWithScrollInStaggeredGrids.mp4

Steps to reproduce

Testing information

The tests that have been performed

Images/gif

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

[dangermattic]

	1 Warning
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

	1 Message
📖	This PR is still a Draft: some checks will be skipped.

Generated by 🚫 Danger

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	2b7fbfc
	Direct Download	woocommerce-wear-prototype-build-pr13079-2b7fbfc.apk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	2b7fbfc
	Direct Download	woocommerce-prototype-build-pr13079-2b7fbfc.apk

[JorgeMucientes]

This is a small issue I'm not sure it can be resolved with the current implementation. This callback handles showing the toolbar collapsed/expanded properly when navigating back and forth from dashboard. Using LazyColumn or LazyStaggered grid we don't have access to scroll position and thus we won't be able to tell if the toolbar should be expanded or collapsed. By default we'll show it expanded and as soon as the user scrolls it will adjust accordingly:

toolbarExpandedDefault.mp4

I think this is an acceptable tradeoff if we get proper support for tablet screens.