PeaceGeeksSociety / services-advisor

Map of services for Syrian refugees in Jordan
MIT License
8 stars 12 forks source link

[WIP] Mobile performance improvments #231

Closed dylanmccall closed 6 years ago

dylanmccall commented 6 years ago

Changes from PR #230.

Some noisy commits here but in essence these changes:

  1. Trigger all network data-fetch as early as possible
  2. Move bunch of map initialization logic out of controller and into Service; this helps by putting it all in one place and avoid using events for coordination (see 3.).
  3. Remove some of the indirection between Angular services/controllers ($scope.$broadcast events, etc).
  4. Only render collapsible filter lists when they're opened. This is hugely expensive to do on initial page load and most of the time majority of those lists are never made visible.
  5. Uses Leaflet MarkerCluster's addLayers() method to add markers asynchronously in-bulk instead of adding them individually.
  6. Adds an animated loading spinner. Spinner uses CSS keyframe animations which are rendered off-thread, this means it shouldn't freeze/glitch when main thread is busy doing stuff.
  7. Expensive MarkerCluster operations are only performed when the map is visible. This is an improvement on mobile devices with narrow (< 768px) screens as the map isn't visible when performing filtering actions.

There's a bunch of syntax and other organization changes here, sorry for the noise, it helped me wrap my head around the code and execution flow.

dylanmccall commented 6 years ago

This PR breaks PeaceGeeksSociety/servicesadvisor-3.0#86: when we change language, the map (once again) does not maintain its position. Fixing that seems problematic, so I'll leave it to folks more attached to this project to decide whether it's a blocker…