My Home: Activities load visibly as waterfall

[richardolsson]

Description

The new "My activities" page (introduced in #2425) loads the user's events, call assignments and canvass assignments with a hook called useMyActivities(). This hook uses a new way of loading, useRemoteList(), which is intended to replace the utility function loadListIfNecessary() (not a hook) and enables use of React Suspense by throwing a promise while loading is happening.

The useMyActivities() hook loads three pieces of data using three separate hooks, that each throw promises. It seems that in production, this will often result in data loading in series, and the loading indicator disappearing after the first load.

Steps to reproduce

1. Make sure that one user has both events, call assignments and canvass assignments. That is often (and currently at the time of writing) the case for [email protected]
2. Go to https://app.dev.zetkin.org/my
3. Sign in as the user with all types of activities
4. Wait for page to load, look at list of activities and filter towards the top of the screen

Expected Behaviour

The page should load and all activities should appear simultaneously. Since all activities load at the same time, the filters ("Call", "Canvass", "Events") should also all appear at the same time.

Actual Behaviour

Some activities (call assignments and events) load first, and then canvass assignments. Canvass assignments are loaded using the beta API (with a temporary database for experimental features), but that should not be relevant for this.

Screenshots (if you have any)

This is what it looks like for me in production on mobile.

my-activities-waterfall.mp4