Errors in delayed Vue map initialisation
Summary
The vue map component LeafletMap needs to be invalidated once after it is mounted so that the tiles are being shown. We do this with a delay in https://gitlab.com/foodsharing-dev/foodsharing/-/blob/master/client/src/components/map/LeafletMap.vue#L65 (see also https://stackoverflow.com/questions/22642925/leafletjs-map-map-invalidatesize-is-not-working). The delay of 400ms is arbitrary and sometimes too short, which causes some errors:
- Cannot read properties of null (reading 'lat') https://foodsharing-ev.sentry.io/issues/4073794232/events/4796ae5c729347e497c0429c06884d4e/
- Cannot read properties of undefined (reading 'panTo') https://foodsharing-ev.sentry.io/issues/4074835581/events/efa0fe514350423099720cfb1da51c39/
- Cannot read properties of undefined (reading 'invalidateSize') https://foodsharing-ev.sentry.io/issues/4073794175/events/fc67c86733a14e58a105c4fd63f851cb/
- Cannot read properties of null (reading 'getCenter') https://foodsharing-ev.sentry.io/issues/1588214792/events/1f455db54abe49228e0124f7a8721b8e/
Steps to reproduce
Probably by opening one of the maps (in the store information modal or the region pin) on a slow or busy device
What is the current bug behavior?
Leaflet map is not initialised when the delay is over
Possible fixes
Some way of doing this without a fixed delay