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

Author: skeptrunedev

fern/assets/styles.css

@@ -90,13 +90,13 @@
   text-align: center;
 }
 
-.card-content>h3 {
+.card-content > h3 {
   margin: 16px 0 8px 0;
   font-size: 1.5em;
   text-align: center;
 }
 
-.card-content>p {
+.card-content > p {
   font-size: 1em;
   text-align: center;
 }
@@ -116,37 +116,59 @@
   height: 100%;
 }
 
-#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type>div:first-of-type {
+#\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type
+  > div:first-of-type {
   display: none;
 }
 
-#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
+#\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type:before {
   content: "Vapi will make a request to your server with the following object:";
   font-size: 0.875rem;
 }
 
-:is(.light) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
+:is(.light)
+  #\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type:before {
   color: #0008059f;
 }
 
-:is(.dark) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
+:is(.dark)
+  #\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type:before {
   color: #f6f5ffb6;
 }
 
-#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type>div:first-of-type {
+#\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type
+  > div:first-of-type {
   display: none;
 }
 
-#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
+#\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type:before {
   content: "Vapi will make a request to your server with the following object:";
   font-size: 0.875rem;
 }
 
-:is(.light) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
+:is(.light)
+  #\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type:before {
   color: #0008059f;
 }
 
-:is(.dark) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
+:is(.dark)
+  #\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type:before {
   color: #f6f5ffb6;
 }
 
@@ -178,4 +200,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);
 }