Fix slow re-render of sidebar due to useSWR

Very weird that useSWR is blocking the render in this way. Trusty `requestAnimationFrame` is here to save the day yet again.

components/Map.tsx

@@ -843,7 +843,10 @@ const Map: React.FC = () => {
         <div ref={mapContainer} className={styles["map-container"]}>
           <Sidebar
             selectedCell={selectedCell}
-            clearSelectedCell={() => router.push({ query: {} })}
+            clearSelectedCell={() => {
+              console.log("clearSelectedCell");
+              router.push({ query: {} });
+            }}
             setSelectedCells={setSelectedCells}
             counts={counts}
             countsError={countsError}

components/SearchBar.tsx

@@ -1,6 +1,5 @@
 import { useCombobox } from "downshift";
 import React, { useEffect, useState, useRef } from "react";
-import { useRouter } from "next/router";
 import MiniSearch, { SearchResult } from "minisearch";
 import useSWRImmutable from "swr/immutable";
 
@@ -51,17 +50,22 @@ const SearchBar: React.FC<Props> = ({
   fixed = false,
   inputRef,
 }) => {
-  const router = useRouter();
+  const [rendered, setRendered] = useState(false);
 
   const modSearch = useRef<MiniSearch<Mod> | null>(
     null
   ) as React.MutableRefObject<MiniSearch<Mod>>;
 
   const { data, error } = useSWRImmutable(
-    `https://mods.modmapper.com/mod_search_index.json`,
+    rendered && `https://mods.modmapper.com/mod_search_index.json`,
     (_) => jsonFetcher<Mod[]>(_)
   );
 
+  useEffect(() => {
+    // awful hack to delay rendering of the mod_search_index.json, since it can block rendering somehow
+    requestAnimationFrame(() => setRendered(true));
+  });
+
   useEffect(() => {
     if (data && !modSearch.current) {
       modSearch.current = new MiniSearch({
@@ -178,6 +182,11 @@ const SearchBar: React.FC<Props> = ({
                 {result.name}
               </li>
             ))}
+          {error && (
+            <div className={styles.error}>
+              Error loading mod search index: {error}.
+            </div>
+          )}
         </ul>
       </div>
     </>

components/Sidebar.tsx

@@ -95,6 +95,8 @@ const Sidebar: React.FC<Props> = ({
   };
 
   const renderOpenSidebar = () => {
+    console.log("render sidebar");
+    console.log(router.query.plugin);
     if (selectedCell) {
       return (
         <div
@@ -157,6 +159,7 @@ const Sidebar: React.FC<Props> = ({
         </div>
       );
     } else {
+      console.log("render base page");
       return (
         <div
           className={styles.sidebar}

styles/SearchBar.module.css

@@ -62,3 +62,7 @@
 .highlighted-result {
   background-color: #bde4ff;
 }
+
+.error {
+  color: red;
+}