From f3484a427058c1d52136165b397057b0a95c64e2 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Mon, 7 Jun 2021 19:12:21 +0200
Subject: [PATCH] docs: fix DocSearch not loading in SSR

---
 packages/docs/gatsby-browser.js              |  4 ++
 packages/docs/src/components/search-input.js | 11 +++---
 packages/docs/src/index.js                   | 40 ++++++++++----------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/docs/gatsby-browser.js b/packages/docs/gatsby-browser.js
index f23416292..7f09ef13a 100755
--- a/packages/docs/gatsby-browser.js
+++ b/packages/docs/gatsby-browser.js
@@ -5,3 +5,7 @@ import * as React from 'react'
 import { WrapPageElement, setDocSearchComponents } from './src'
 
 export const wrapPageElement = (props) => <WrapPageElement {...props} />
+
+export const onRenderBody = (args) => {
+  setDocSearchComponents(args)
+}
diff --git a/packages/docs/src/components/search-input.js b/packages/docs/src/components/search-input.js
index 80aac3eea..c83d22a3a 100644
--- a/packages/docs/src/components/search-input.js
+++ b/packages/docs/src/components/search-input.js
@@ -38,6 +38,7 @@ const algoliaStyles = {
       color: 'primary',
       '--shadow-color': (theme) => theme.colors.muted,
       boxShadow: 'inset 0 -2px 0 0 var(--shadow-color)',
+      padding: 0,
     },
     '.algolia-docsearch-suggestion--subcategory-column-text': {},
     '.algolia-docsearch-suggestion--text': {
@@ -48,9 +49,6 @@ const algoliaStyles = {
       fontWeight: 'bold',
       color: 'text',
       fontSize: 1,
-      '.algolia-docsearch-suggestion--highlight': {
-        verticalAlign: 'middle',
-      },
     },
     '.algolia-docsearch-suggestion--category-header': {
       display: 'none !important',
@@ -65,9 +63,10 @@ const algoliaStyles = {
     '.algolia-docsearch-suggestion--subcategory-column:before': {
       display: 'none',
     },
-    '.ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content': {
-      backgroundColor: 'muted',
-    },
+    '.ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content':
+      {
+        backgroundColor: 'muted',
+      },
     '@media (max-width: 768px)': {
       // todo: make docsearch autocomplete dropdown responsive
     },
diff --git a/packages/docs/src/index.js b/packages/docs/src/index.js
index 5936d2ea2..84ee8e74d 100755
--- a/packages/docs/src/index.js
+++ b/packages/docs/src/index.js
@@ -41,27 +41,29 @@ export const setDocSearchComponents = ({
       type="text/javascript"
       dangerouslySetInnerHTML={{
         __html: `
+
+          var lastSearchInput = null; 
           var observer = new MutationObserver(function () {
-          var searchSelector = "#algolia-docs-search";
-          var searchInput = document.querySelector(searchSelector);
-          if (searchInput) {
-            docsearch({
-              apiKey: "84ed820927eee5fa5018c9f1abe70390",
-              indexName: "theme-ui",
-              inputSelector: searchSelector,
-              debug: true
-            })
-            observer.disconnect()
-            observer = null
-          }
-        });
-        // start observing
-        document.addEventListener("DOMContentLoaded", function() {
-          observer.observe(document, {
-            childList: true,
-            subtree: true
+            var searchSelector = "#algolia-docs-search";
+            var searchInput = document.querySelector(searchSelector);
+
+            if (lastSearchInput !== searchInput) {
+              docsearch({
+                apiKey: "84ed820927eee5fa5018c9f1abe70390",
+                indexName: "theme-ui",
+                inputSelector: searchSelector,
+                debug: true
+              })
+              lastSearchInput = searchInput;
+            }
           });
-        });        
+
+          document.addEventListener("DOMContentLoaded", function() {
+            observer.observe(document, {
+              childList: true,
+              subtree: true
+            });
+          });        
       `,
       }}
     />,