diff --git a/src/theme/SearchBar/index.js b/src/theme/SearchBar/index.js
index ee0e451..2f189d1 100644
--- a/src/theme/SearchBar/index.js
+++ b/src/theme/SearchBar/index.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useRef, useCallback } from "react";
+import React, { useRef, useCallback, useState } from "react";
 import classnames from "classnames";
 import { useHistory } from "@docusaurus/router";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -13,8 +13,9 @@ import { usePluginData } from '@docusaurus/useGlobalData';
 const Search = props => {
   const initialized = useRef(false);
   const searchBarRef = useRef(null);
+  const [indexReady, setIndexReady] = useState(false);
   const history = useHistory();
-  const { siteConfig = {} } = useDocusaurusContext();
+  const { siteConfig = {}, isClient = false} = useDocusaurusContext();
   const { baseUrl } = siteConfig;
   const initAlgolia = (searchDocs, searchIndex, DocSearch) => {
       new DocSearch({
@@ -60,6 +61,7 @@ const Search = props => {
           return;
         }
         initAlgolia(searchDocs, searchIndex, DocSearch);
+        setIndexReady(true);
       });
       initialized.current = true;
     }
@@ -76,6 +78,10 @@ const Search = props => {
     [props.isSearchBarExpanded]
   );
 
+  if (isClient) {
+    loadAlgolia();
+  }
+
   return (
     <div className="navbar__search" key="search-box">
       <span
@@ -91,7 +97,7 @@ const Search = props => {
       <input
         id="search_input_react"
         type="search"
-        placeholder="Search"
+        placeholder={indexReady ? 'Search' : 'Loading...'}
         aria-label="Search"
         className={classnames(
           "navbar__search-input",
@@ -103,6 +109,7 @@ const Search = props => {
         onFocus={toggleSearchIconClick}
         onBlur={toggleSearchIconClick}
         ref={searchBarRef}
+        disabled={!indexReady}
       />
     </div>
   );