Load the boundary once the map is showing

app/assets/javascripts/tailwind/maps.js

@@ -84,5 +84,10 @@ async function initialiseAuthorityMap(el, params) {
   var ne = new LatLng(params.ne.lat, params.ne.lng);
   var bounds = new LatLngBounds(sw, ne);
   map.fitBounds(bounds);
-  map.data.loadGeoJson(params.json);
+  map.addListener('tilesloaded', function() {
+    // Only load the boundary once the map has displayed. Do this because loading the boundary can
+    // take a while and the map is already showing roughly where the council is without the boundary
+    // and so it is immediately useful
+    map.data.loadGeoJson(params.json);
+});
 }

app/views/_tailwind/authorities/show.html.erb

@@ -8,7 +8,6 @@
 
 <% if @authority.boundary && Flipper.enabled?(:show_authority_map, current_user) %>
   <%# TODO: Probably want to precompute the bounding box when the boundary data is loaded instead %>
-  <%# TODO: Load the boundary data asynchronously so that it doesn't hold up a page load %>
   <% bb = RGeo::Cartesian::BoundingBox.create_from_geometry(@authority.boundary) %>
   <div class="w-full my-8 h-80 bg-google-maps-green"
        x-init="initialiseAuthorityMap($el, <%= { json: boundary_authority_url(format: :json), sw: { lng: bb.min_x, lat: bb.min_y }, ne: { lng: bb.max_x, lat: bb.max_y } }.to_json %>)">