Fix locator bundle race condition (#786)

Fix the race condition which occurs when the search query loads before the locator bundle

This fix ensures that the locator bundle executes after Answers loads, but before Answers initializes. The race condition issue was first found on Theme 1.20.1, and it caused the cards to break when the page loaded. I put a fix up in #739, which stopped the page from breaking, but it did not fix the underlying cause of the race condition. This PR fixes the root problem by making the execution order of the javascript consistent.

The race condition lead to an issue where two queries were ran on page load. This became a problem in a techops (Zendesk 405748) because the page would load and return no results while being zoomed into Kansas. This PR prevents the double queries from being sent if the locator bundle takes a while to load. There still may be some situations where two queries are sent on page load, but those issues are out of scope of this particular issue.  I also zoomed out the map by default so that if no default initial search is supplied, the map will show the entire US rather than be zoomed into Kansas.

J=SLAP-1329
TEST=manual

Test both Google Maps and Mapbox. Use fiddler to artificially delay the locator bundle. Test iframe and non-iframe experiences.

layouts/html.hbs

@@ -80,6 +80,7 @@
     <script>
       document.addEventListener('DOMContentLoaded', function () {
         {{> script/on-document-load}}
+        initAnswers();
       });
     </script>
     <script src="{{relativePath}}/bundle.js" data-webpack-inline></script>

script/partials/sdk-js-script-tags.hbs

@@ -6,11 +6,9 @@
 <script
   src="{{> script/partials/sdk-url sdkAsset="answers-modern.min.js" locale=locale sdkVersion=sdkVersion}}"
   type="module"
-  onload="initAnswers()"
 ></script>
 <script
   src="{{> script/partials/sdk-url sdkAsset="answers.min.js" locale=locale sdkVersion=sdkVersion}}"
   nomodule
-  onload="initAnswers()"
   defer
 ></script>

static/js/theme-map/VerticalFullPageMapOrchestrator.js

@@ -67,7 +67,7 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
      * The default zoom level for the map
      * @type {number}
      */
-    this.defaultZoom = this.providerOptions.zoom || 14;
+    this.defaultZoom = this.providerOptions.zoom || 4;
 
     /**
      * The current zoom level of the map

templates/vertical-full-page-map/page-setup.js

@@ -1,31 +1,11 @@
-function addFullPageMap() {
-  {{> theme-components/theme-map/script}}
-  {{> theme-components/vertical-full-page-map/script}}
-}
-
-if (window.locatorBundleLoaded) {
-  addFullPageMap();
-} else {
-  const locatorBundleScript = document.querySelector('script#js-answersLocatorBundleScript');
-  locatorBundleScript.onload = () => {
-    window.locatorBundleLoaded = true;
-    locatorBundleScript.dispatchEvent(new Event('vertical-full-page-map-bundle-loaded'));
-    addFullPageMap();
-  }
-}
+{{> theme-components/theme-map/script}}
+{{> theme-components/vertical-full-page-map/script}}
 
 /**
- * Registers listeners on the card once the locator bundle is loaded
+ * Registers listeners on the card
  *
  * @param {ANSWERS.Component} card A location card
  */
-function registerVerticalFullPageMapCardListeners(card) {
-  if (window.locatorBundleLoaded) {
-    new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
-    return;
-  }
-  const verticalFullPageMapScript = document.querySelector('script#js-verticalFullPageMapScript');
-  verticalFullPageMapScript.addEventListener('vertical-full-page-map-bundle-loaded', () => {
-    new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
-  });
+ function registerVerticalFullPageMapCardListeners(card) {
+  new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
 }

templates/vertical-full-page-map/page.html.hbs

@@ -17,8 +17,7 @@
     {{> templates/vertical-full-page-map/script/locationbias modifier="main" }}
     {{> templates/vertical-full-page-map/script/locationbias modifier="mobileMap" }}
   {{/script/core }}
-  <script id="js-answersLocatorBundleScript" src="{{relativePath}}/locator-bundle.js"
-    onload="window.locatorBundleLoaded = true;" defer></script>
+    <script id="js-answersLocatorBundleScript" src="{{relativePath}}/locator-bundle.js" defer></script>
     <div class="Answers AnswersVerticalMap CollapsibleFilters VerticalFullPageMap VerticalFullPageMap--mobileListView js-answersVerticalFullPageMap">
       <div class="Answers-content">
         <div class="Answers-contentWrap js-locator-contentWrap" role="region" aria-label="{{ translate phrase="Main location search" }}">

test-site/pages-patches/locations_full_page_map_with_filters.html.hbs.patch

@@ -1,5 +1,5 @@
---- locations_full_page_map_with_filters.html.hbs
-+++ locations_full_page_map_with_filters.html.hbs
+--- templates/vertical-full-page-map/page.html.hbs	2021-05-24 14:53:55.000000000 -0400
++++ test-site/pages/locations_full_page_map_with_filters.html.hbs	2021-05-24 14:58:17.000000000 -0400
 @@ -1,7 +1,7 @@
  {{#> layouts/html pageWrapperCss="YxtPage-wrapper--mobileListView" }}
    {{#> script/core }}

tests/script/partials/sdk-js-script-tags.js

@@ -3,24 +3,20 @@ const hbs = require('../../test-utils/hbs');
 const defaultOutput = `<script
   src="https://assets.sitescdn.net/answers/v1.8/answers-modern.min.js"
   type="module"
-  onload="initAnswers()"
 ></script>
 <script
   src="https://assets.sitescdn.net/answers/v1.8/answers.min.js"
   nomodule
-  onload="initAnswers()"
   defer
 ></script>`;
 
 const jaOutput = `<script
   src="https://assets.sitescdn.net/answers/v1.8/ja-answers-modern.min.js"
   type="module"
-  onload="initAnswers()"
 ></script>
 <script
   src="https://assets.sitescdn.net/answers/v1.8/ja-answers.min.js"
   nomodule
-  onload="initAnswers()"
   defer
 ></script>`;