feat(trieve): improve loading time to prevent flashing of old component (#288)

Author: skeptrunedev

fern/assets/styles.css

@@ -178,4 +178,33 @@
 
 html.dark button[data-highlighted] .fern-api-property-meta {
   color: var(--accent-contrast) !important;
+}
+
+#trieve-search-modal:not(.dark) {
+  background-color: #fffaea !important;
+
+  .chat-footer-wrapper {
+    background-color: #fffaea !important;
+
+    .input-wrapper form input.chat {
+      background-color: #fffaea !important;
+    }
+  }
+
+  .trieve-footer {
+    background-color: #fffaea !important;
+  }
+
+  .input-wrapper .input-flex input {
+    background-color: #fffaea !important;
+  }
+
+  .trieve-elements-docs {
+    .item {
+      background-color: #fffaea !important;
+      &:hover, &:focus {
+        background-color: #f8f4e6 !important;
+      }
+    }
+  }
 }

fern/assets/trieve-user-script.js

@@ -20,19 +20,26 @@ const removeAllClickListeners = (element) => {
 };
 
 const makeDefaultSearchTrieve = async () => {
+  let defaultSearchBar = null;
   try {
-    let defaultSearchBar = null;
     let retries = 0;
     while (!defaultSearchBar && retries < 10) {
       for (const el of document.querySelectorAll("*")) {
-        if (el.querySelector('[aria-label="Search"]')) {
-          defaultSearchBar = el.querySelector('[aria-label="Search"]');
+        if (el.querySelector('[aria-label="Search"], #fern-search-button')) {
+          defaultSearchBar = el.querySelector(
+            '[aria-label="Search"], #fern-search-button'
+          );
           break;
+        } else {
+          console.log("Default search bar not found");
         }
       }
       retries++;
       await new Promise((resolve) => setTimeout(resolve, 10));
     }
+    if (defaultSearchBar?.hasAttribute("disabled")) {
+      defaultSearchBar.removeAttribute("disabled");
+    }
     defaultSearchBar = removeAllClickListeners(defaultSearchBar);
 
     defaultSearchBar.onclick = () => {
@@ -44,16 +51,23 @@ const makeDefaultSearchTrieve = async () => {
   } catch (e) {
     console.error(e);
   }
+
+  return !!defaultSearchBar;
 };
+
 try {
-  await makeDefaultSearchTrieve();
-  setTimeout(makeDefaultSearchTrieve, 50);
-  setTimeout(makeDefaultSearchTrieve, 100);
-  setTimeout(makeDefaultSearchTrieve, 250);
-  setTimeout(makeDefaultSearchTrieve, 500);
-  setTimeout(makeDefaultSearchTrieve, 1000);
-  setTimeout(makeDefaultSearchTrieve, 2000);
-  setTimeout(makeDefaultSearchTrieve, 3000);
+  let defaultSearchBar = null;
+  let retries = 0;
+  let sleepTime = 50;
+  while (!retries < 10) {
+    defaultSearchBar = await makeDefaultSearchTrieve();
+    if (defaultSearchBar) {
+      break;
+    }
+    await new Promise((resolve) => setTimeout(resolve, sleepTime));
+    sleepTime = Math.min(sleepTime * 2, 500);
+    retries++;
+  }
 } catch (e) {
   console.error(e);
 }