Map tiles on mobile loading slowly

[dnsos]

On mobile (in slow networks), the map tiles are sometimes not loaded when a user enters the application. The loading screen which should prevent this experience does not listen to the loading state of the tiles.

This could potentially be solved with the areTilesLoaded method (doc) that could be bound to the application state.

[ff6347]

But what should we do. I think we should try to decouple it totally from the tile loading.

[dnsos]

I've started working on a branch that would remove the loading overlay only after map + trees have rendered (only for mobile).

It does not fix the loading speed, but might improve the user experience: loading screen disappeared means everything has in fact loaded.

The approach (see here) feels hacky, but it seems to work. Feedback and thoughts appreciated!

[ff6347]

But doesn't that trap users in the loading screen until the map is done.
deck.gl works on Desktop also without the map tiles. So you can already interact with the map before the tiles are there.

On mobile this means the loading screen will take between 10 to 20 seconds?
People will bounce away a lot.

I think we should find a way to let the user interact with the application before the map is done. Move map tiles loading into the background and give the user the possibility to interact already.

Maybe (random thoughts):

logged in users:

• send directly into the their profile.
• zoom into their trees.
• give them some stats about the state of their trees

new users:

• do some animation with the content of the overlay
• distract them from the fact that the application is not ready

map:

• review https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data

data fetching:

• review data fetching in the whole application.