[Reader] Implement "Tags" feed horizontal posts list item component loading

RenanLukas commented 1 month ago

[!WARNING]
Should be merged after https://github.com/wordpress-mobile/WordPress-Android/pull/20614

Fixes #20628

https://github.com/wordpress-mobile/WordPress-Android/assets/14964993/52c08bed-1d90-46c0-a20c-5e9ce060c5c5

https://github.com/wordpress-mobile/WordPress-Android/assets/14964993/a8aa11a3-6050-4b19-b026-eb0d522f3c4c

To Test:

The UI component is not being used yet, so in order to test it you can run HorizontalPostListItemLoadingPreview and compare with Figma specs.

Regression Notes

Potential unintended areas of impact
- None
What I did to test those areas of impact (or what existing automated tests I relied on)
- Manual testing
What automated tests I added (or what prevented me from doing so)

--

PR Submission Checklist:

[x] I have completed the Regression Notes.
[x] I have considered adding accessibility improvements for my changes.
[x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing Checklist (strike-out the not-applying and unnecessary ones):

[ ] WordPress.com sites and self-hosted Jetpack sites.
[ ] Portrait and landscape orientations.
[x] Light and dark modes.
[ ] Fonts: Larger, smaller and bold text.
[ ] High contrast.
[ ] Talkback.
[ ] Languages with large words or with letters/accents not frequently used in English.
[ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
[ ] Large and small screen sizes. (Tablet and smaller phones)
[ ] Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

wpmobilebot commented 1 month ago

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

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20634-c54757c
	Commit	c54757cf50efd3319a4e7fdff8bb436dbe283e77
	Direct Download	`jetpack-prototype-build-pr20634-c54757c.apk`

Note: Google Login is not supported on these builds.

wpmobilebot commented 1 month ago

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

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr20634-c54757c
	Commit	c54757cf50efd3319a4e7fdff8bb436dbe283e77
	Direct Download	`wordpress-prototype-build-pr20634-c54757c.apk`

Note: Google Login is not supported on these builds.

RenanLukas commented 4 weeks ago

@osullivanchris @daniloercoli Sorry, but I had to change the implementation of the shimmer. Could you please review it again?

@osullivanchris I saw your comment about the shimmer color, but since I had to change the implementation I decided to show you how it looks right now before changing the colors. Here are the updated videos:

https://github.com/wordpress-mobile/WordPress-Android/assets/14964993/b7c6cf64-6050-4452-a235-16f252b500a7

https://github.com/wordpress-mobile/WordPress-Android/assets/14964993/55386581-93fd-4fab-affa-142e1c9c05c6

osullivanchris commented 4 weeks ago

@RenanLukas it still looks a bit too intense to me. I tried a quick prototype. What worked for me was:

slower time for the shimmer to come across the screen (900ms in this example)
using white rather than black overlay in dark mode, so the shimmer actually makes it brighter, like light casting across it. I have used white with opacity.
I have a slight ease in / easy out animation happening so the shimmer feels more natural, not completely linear animation

Not sure how feasible this is or how much control you have. By the way, this could apply to any screen in our app.

https://github.com/wordpress-mobile/WordPress-Android/assets/50576199/de09b9c9-5109-4e03-9f02-690eb77b1f46

sonarcloud[bot] commented 3 weeks ago

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

codecov[bot] commented 3 weeks ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 40.15%. Comparing base (f1b2baf) to head (c54757c). Report is 6 commits behind head on feature/tags-ia.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## feature/tags-ia #20634 +/- ## =================================================== - Coverage 40.33% 40.15% -0.18% =================================================== Files 1474 1465 -9 Lines 67878 67522 -356 Branches 11225 11183 -42 =================================================== - Hits 27377 27114 -263 + Misses 38034 37959 -75 + Partials 2467 2449 -18 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

RenanLukas commented 3 weeks ago

As discussed in DM, the shimmer effect won't be implemented in this PR and will be taken care in https://github.com/wordpress-mobile/WordPress-Android/issues/20679

This PR only implements the loading (grey rectangles) without shimmer effect.

wordpress-mobile / WordPress-Android