Reader Recent Feed: Refetch subscriptions from empty state #97030

allilevine · 2024-12-03T20:20:11Z

Related to #96988

Proposed Changes

Refetch subscriptions when the subscription count changes. This is needed to update from the empty state when onboarding is completed and subscriptions are added.
Extract the subscription logic.

Screen.Recording.2024-12-03.at.3.24.43.PM.mov

Why are these changes being made?

Improve the Reader empty state experience.

Testing Instructions

Remove all of your subscriptions except to your own sites.
Go to /read
Click "Discover and subscribe to sites you'll love"
Subscribe to one or more sites.
Click Continue.
The stream with the sites you've subscribed to should show.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-12-03T20:20:24Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-126454

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-126454&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-126454&env=a8c-for-agencies

client/reader/following/main.tsx

allilevine · 2024-12-03T20:22:34Z

client/reader/following/use-subscriptions.ts

+	} = SubscriptionManager.useSiteSubscriptionsQuery();
+
+	const isLoading = isLoadingCount || isLoadingSiteSubscriptions;
+	const blogCount = subscriptionsCount?.blogs ?? 0;


This puts unnecessary optional chaining in dependencies, but is convenient.

Nit: blogsCount

blogCount makes sense to me grammatically here.

allilevine · 2024-12-03T20:23:08Z

client/reader/following/use-subscriptions.ts

+		return siteSubscriptions?.subscriptions ? nonSelfSubscriptions.length > 0 : blogCount > 0;
+	}, [ blogCount, siteSubscriptions.subscriptions, nonSelfSubscriptions ] );
+
+	useEffect( () => {


This is the main change I'm making, a useEffect to update subscriptions.

matticbot · 2024-12-03T20:26:02Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~40 bytes added 📈 [gzipped])

name    parsed_size           gzip_size
reader       +148 B  (+0.0%)      +40 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

mehmoodak

I've added some comments, but overall the changes looks good.

client/reader/following/main.tsx

mehmoodak · 2024-12-04T08:03:21Z

client/reader/following/use-subscriptions.ts

+	} = SubscriptionManager.useSiteSubscriptionsQuery();
+
+	const isLoading = isLoadingCount || isLoadingSiteSubscriptions;
+	const blogCount = subscriptionsCount?.blogs ?? 0;


Nit: blogsCount

client/reader/following/use-subscriptions.ts

…hanges.

matticbot · 2024-12-04T13:39:24Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/reader-recent-feed-overhaul-empty-state-refresh on your sandbox.

allilevine self-assigned this Dec 3, 2024

allilevine commented Dec 3, 2024

View reviewed changes

client/reader/following/main.tsx Outdated Show resolved Hide resolved

allilevine commented Dec 3, 2024

View reviewed changes

allilevine marked this pull request as ready for review December 3, 2024 20:27

allilevine requested a review from a team as a code owner December 3, 2024 20:27

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 3, 2024

mehmoodak approved these changes Dec 4, 2024

View reviewed changes

allilevine added 2 commits December 4, 2024 08:30

Extract subscription logic and refresh subscriptions when the count c…

754d1d9

…hanges.

Clean up hook for readability.

9f326ac

allilevine force-pushed the update/reader-recent-feed-overhaul-empty-state-refresh branch from 04af4c4 to 9f326ac Compare December 4, 2024 13:30

allilevine added 2 commits December 4, 2024 09:12

Rename hook, simplify return, and add JSDoc comment.

a9a533c

Rename file and add tests.

ef68677

allilevine merged commit 0fce49b into trunk Dec 4, 2024
11 checks passed

allilevine deleted the update/reader-recent-feed-overhaul-empty-state-refresh branch December 4, 2024 16:00

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 4, 2024

jsnajdr mentioned this pull request Jan 25, 2025

Reader Onboarding: InterestsModal appears for a brief moment even when it shouldn't #98916

Closed

Addison-Stavlo mentioned this pull request Jan 28, 2025

Reader onboarding - fix issue with flickering interests modal on /read load. #98979

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Reader Recent Feed: Refetch subscriptions from empty state #97030

Reader Recent Feed: Refetch subscriptions from empty state #97030

Uh oh!

allilevine commented Dec 3, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Dec 3, 2024 •

edited by matticbot

Loading

Uh oh!

Uh oh!

allilevine Dec 3, 2024

Uh oh!

mehmoodak Dec 4, 2024

Uh oh!

allilevine Dec 4, 2024

Uh oh!

allilevine Dec 3, 2024

Uh oh!

matticbot commented Dec 3, 2024 •

edited

Loading

Uh oh!

mehmoodak left a comment

Uh oh!

Uh oh!

mehmoodak Dec 4, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matticbot commented Dec 4, 2024

Uh oh!

Uh oh!

Uh oh!

Reader Recent Feed: Refetch subscriptions from empty state #97030

Reader Recent Feed: Refetch subscriptions from empty state #97030

Uh oh!

Conversation

allilevine commented Dec 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Dec 3, 2024 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

allilevine Dec 3, 2024

Choose a reason for hiding this comment

Uh oh!

mehmoodak Dec 4, 2024

Choose a reason for hiding this comment

Uh oh!

allilevine Dec 4, 2024

Choose a reason for hiding this comment

Uh oh!

allilevine Dec 3, 2024

Choose a reason for hiding this comment

Uh oh!

matticbot commented Dec 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mehmoodak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mehmoodak Dec 4, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matticbot commented Dec 4, 2024

Uh oh!

Uh oh!

Uh oh!

allilevine commented Dec 3, 2024 •

edited

Loading

github-actions bot commented Dec 3, 2024 •

edited by matticbot

Loading

matticbot commented Dec 3, 2024 •

edited

Loading