load search when the page loads, rather than when react is done

MozillaFoundation · Oct 28, 2021 · 97ad8a4 · 97ad8a4
1 parent 5312002
commit 97ad8a4
Show file tree

Hide file tree

Showing 4 changed files with 359 additions and 349 deletions.
diff --git a/esbuild.config.js b/esbuild.config.js
@@ -25,6 +25,7 @@ const sources = {
   "callpower": `foundation/pages/callpower.js`,
   "directory-listing-filters": `foundation/pages/directory-listing-filters.js`,
   "bg-main": `buyers-guide/bg-main.js`,
+  "bg-search": `buyers-guide/search.js`,
   polyfills: `polyfills.js`,
 };
 

diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html b/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html
@@ -1,6 +1,11 @@
 {% extends "buyersguide/bg_base.html" %}
 
-{% load env i18n static wagtailimages_tags cache bg_nav_tags %}
+{% load static env i18n static wagtailimages_tags cache bg_nav_tags %}
+
+{% block additional_head_elements %}
+  {{ block.super }}
+  <script src="{% static "_js/bg-search.compiled.js" %}" async defer></script>
+{% endblock %}
 
 {% block bodyclass %}pni catalog{% endblock %}
 

diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js
@@ -13,7 +13,6 @@ import injectMultipageNav from "../foundation/inject-react/multipage-nav.js";
 import primaryNav from "../primary-nav.js";
 
 import HomepageSlider from "./homepage-c-slider.js";
-import { SearchFilter, PNIToggle } from "./search.js";
 import AnalyticsEvents from "./analytics-events.js";
 import initializeSentry from "../common/sentry-config.js";
 
@@ -111,8 +110,6 @@ let main = {
   initPageSpecificScript() {
     if (document.querySelector(`body.pni.catalog`)) {
       HomepageSlider.init();
-      SearchFilter.init();
-      PNIToggle.init();
     }
   },
 };