add static placeholders for the searchbar and nav components

This component adds static html placeholders for the searchbar and nav components, which will be displayed prior to the SDK loading and components being added to the page. J=SLAP-1336 TEST=manual see that on each of the 5 page templates, the searchbar and nav placeholders will display for a brief second before the page finishes loading
yext · May 27, 2021 · f2d1f21 · f2d1f21
1 parent 25d08e9
commit f2d1f21
Show file tree

Hide file tree

Showing 20 changed files with 201 additions and 17 deletions.
diff --git a/templates/universal-standard/markup/navigation.hbs b/templates/universal-standard/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/universal-standard/markup/searchbar.hbs b/templates/universal-standard/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch"></div>
+<div class="Answers-search js-answersSearch">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/universal-standard/script/navigation.hbs b/templates/universal-standard/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/universal-standard/script/searchbar.hbs b/templates/universal-standard/script/searchbar.hbs
@@ -24,4 +24,7 @@ const shouldAddOverlayConfig = window.isOverlay && document.querySelector('.js-A
 ANSWERS.addComponent("SearchBar", Object.assign({}, {
   container: ".js-answersSearch",
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-full-page-map/markup/navigation.hbs b/templates/vertical-full-page-map/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-full-page-map/markup/searchbar.hbs b/templates/vertical-full-page-map/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch" id="js-answersSearchBar"></div>
+<div class="Answers-search js-answersSearch">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-full-page-map/script/navigation.hbs b/templates/vertical-full-page-map/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-full-page-map/script/searchbar.hbs b/templates/vertical-full-page-map/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-grid/markup/navigation.hbs b/templates/vertical-grid/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-grid/markup/searchbar.hbs b/templates/vertical-grid/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch"></div>
+<div class="Answers-search js-answersSearch">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-grid/script/navigation.hbs b/templates/vertical-grid/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--
@@ -56,7 +59,6 @@ verticalPages: [
     HitchhikerJS.getInjectedProp(
       "{{{@root.global_config.experienceKey}}}",
       ["verticals", "{{{verticalKey}}}", "displayName"])
-    {{~#if verticalKey ~}} || "{{{verticalKey}}}" {{~/if ~}}
-    {{~#if fallback ~}} || "{{{fallback}}}" {{~/if ~}}
+    || "{{{verticalKey}}}" || "{{{fallback}}}"
   {{~/if ~}}
 {{/inline}}
diff --git a/templates/vertical-grid/script/searchbar.hbs b/templates/vertical-grid/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-map/markup/navigation.hbs b/templates/vertical-map/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-map/markup/searchbar.hbs b/templates/vertical-map/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch" id="js-answersSearchBar"></div>
+<div class="Answers-search js-answersSearch">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-map/script/navigation.hbs b/templates/vertical-map/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-map/script/searchbar.hbs b/templates/vertical-map/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));
diff --git a/templates/vertical-standard/markup/navigation.hbs b/templates/vertical-standard/markup/navigation.hbs
@@ -1 +1,19 @@
-<div class="Answers-nav js-answersNavigation"></div>
+<div class="Answers-nav Answers-navigation js-answersNavigation" id="js-answersNavigation">
+  <nav class="yxt-Nav-container js-yxt-navContainer ">
+    <ul class="yxt-Nav-expanded" aria-label="Search Page Navigation">
+      <li>
+        {{!-- 
+          This is a placeholder tab so that the placeholder nav bar
+          takes the expected amount of space on the page
+        --}}
+        <a class="js-yxt-navItem yxt-Nav-item is-active"
+          data-middleclick="active"
+          data-eventtype="ALL_TAB_NAVIGATION"
+          style="visibility: hidden;"
+        >
+          placeholder
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/vertical-standard/markup/searchbar.hbs b/templates/vertical-standard/markup/searchbar.hbs
@@ -1 +1,14 @@
-<div class="Answers-search js-answersSearch" id="js-answersSearchBar"></div>
+<div class="Answers-search js-answersSearch">
+  <div class="yxt-SearchBar">
+    <div class="yxt-SearchBar-container">
+      <form class="yxt-SearchBar-form">
+        <input
+          class="js-yext-query yxt-SearchBar-input"
+          id="yxt-SearchBar-input--SearchBar"
+          type="text"
+          name="query"
+        >
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/templates/vertical-standard/script/navigation.hbs b/templates/vertical-standard/script/navigation.hbs
@@ -39,7 +39,10 @@ verticalPages: [
   }{{#unless @last}},{{/unless}}
 {{/if}}
 {{/each}}
-]
+],
+onCreate: function() {
+  this._container.textContent = '';
+}
 }, {{{ json componentSettings.Navigation }}}));
 
 {{!--

diff --git a/templates/vertical-standard/script/searchbar.hbs b/templates/vertical-standard/script/searchbar.hbs
@@ -27,4 +27,7 @@ ANSWERS.addComponent("SearchBar", Object.assign({}, {
     verticalKey: "{{{verticalKey}}}",
   {{/if}}
   ...(shouldAddOverlayConfig ? overlayConfig : {}),
+  onCreate: function() {
+    this._container.textContent = '';
+  }
 }, {{{ json componentSettings.SearchBar }}}));