Merge pull request #14 from easyops-cn/steve/loading

feat: show loading status

Author: weareoutman

package.json

@@ -30,6 +30,7 @@
     "@hapi/joi": "^17.1.1",
     "autocomplete.js": "^0.38.0",
     "cheerio": "^1.0.0-rc.3",
+    "clsx": "^1.1.1",
     "debug": "^4.2.0",
     "fs-extra": "^9.0.1",
     "klaw-sync": "^6.0.0",

src/client/theme/SearchBar/SearchBar.css

@@ -164,3 +164,67 @@ html[data-theme="dark"] .doc-search-empty-icon {
 .aa-suggestion.aa-cursor mark {
   text-decoration: underline;
 }
+
+/* Start: pure CSS loaders */
+/* https://loading.io/css/ */
+.lds-ring {
+  display: none;
+  position: absolute;
+  left: calc(var(--ifm-navbar-padding-horizontal) + 10px);
+  top: 6px;
+  width: 20px;
+  height: 20px;
+  opacity: var(--search-local-loading-icon-opacity, 0.5);
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+  border: 2px solid
+    var(--search-load-loading-icon-color, var(--ifm-navbar-search-input-color));
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(
+      --search-load-loading-icon-color,
+      var(--ifm-navbar-search-input-color)
+    )
+    transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* End: pure CSS loaders */
+
+.navbar__search {
+  position: relative;
+}
+
+.search-index-loading .navbar__search-input {
+  background-image: none;
+}
+
+.search-index-loading .lds-ring {
+  display: inline-block;
+}

src/client/theme/SearchBar/SearchBar.tsx

@@ -1,6 +1,7 @@
-import React, { ReactElement, useCallback, useRef } from "react";
+import React, { ReactElement, useCallback, useRef, useState } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { useHistory } from "@docusaurus/router";
+import clsx from "clsx";
 import { fetchIndexes } from "./fetchIndexes";
 import { SearchSourceFactory } from "../../utils/SearchSourceFactory";
 import { SuggestionTemplate } from "../../utils/SuggestionTemplate.js";
@@ -31,20 +32,23 @@ export default function SearchBar({
   const indexState = useRef("empty"); // empty, loaded, done
   // Should the input be focused after the index is loaded?
   const focusAfterIndexLoaded = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const [inputChanged, setInputChanged] = useState(false);
 
   const loadIndex = useCallback(async () => {
     if (indexState.current !== "empty") {
       // Do not load the index (again) if its already loaded or in the process of being loaded.
       return;
     }
     indexState.current = "loading";
+    setLoading(true);
 
     const [{ wrappedIndexes, zhDictionary }, autoComplete] = await Promise.all([
       fetchIndexes(baseUrl),
       fetchAutoCompleteJS(),
     ]);
 
-    autoComplete(
+    const search = autoComplete(
       searchBarRef.current,
       {
         hint: false,
@@ -73,10 +77,16 @@ export default function SearchBar({
       history.push(document.u);
     });
 
+    indexState.current = "done";
+    setLoading(false);
+
     if (focusAfterIndexLoaded.current) {
-      (searchBarRef.current as HTMLInputElement).focus();
+      const input = searchBarRef.current as HTMLInputElement;
+      if (input.value) {
+        search.autocomplete.open();
+      }
+      input.focus();
     }
-    indexState.current = "done";
   }, [baseUrl, history]);
 
   const onInputFocus = useCallback(() => {
@@ -93,17 +103,37 @@ export default function SearchBar({
     loadIndex();
   }, [loadIndex]);
 
+  const onInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.value) {
+        setInputChanged(true);
+      }
+    },
+    []
+  );
+
   return (
-    <div className="navbar__search">
+    <div
+      className={clsx("navbar__search", {
+        "search-index-loading": loading && inputChanged,
+      })}
+    >
       <input
         placeholder="Search"
         aria-label="Search"
         className="navbar__search-input"
         onMouseEnter={onInputMouseEnter}
         onFocus={onInputFocus}
         onBlur={onInputBlur}
+        onChange={onInputChange}
         ref={searchBarRef}
       />
+      <div className="lds-ring">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </div>
   );
 }

yarn.lock

@@ -2148,6 +2148,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"