Skip to content

Commit d0df7ae

Browse files
committed
feat(trieve): improve loading time to prevent flashing of old component
1 parent b53d08f commit d0df7ae

File tree

2 files changed

+87
-22
lines changed

2 files changed

+87
-22
lines changed

fern/assets/styles.css

Lines changed: 62 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,13 @@
9090
text-align: center;
9191
}
9292

93-
.card-content>h3 {
93+
.card-content > h3 {
9494
margin: 16px 0 8px 0;
9595
font-size: 1.5em;
9696
text-align: center;
9797
}
9898

99-
.card-content>p {
99+
.card-content > p {
100100
font-size: 1em;
101101
text-align: center;
102102
}
@@ -116,37 +116,59 @@
116116
height: 100%;
117117
}
118118

119-
#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type>div:first-of-type {
119+
#\/api-reference\/webhooks\/server-message\#request
120+
h3
121+
+ div:first-of-type
122+
> div:first-of-type {
120123
display: none;
121124
}
122125

123-
#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
126+
#\/api-reference\/webhooks\/server-message\#request
127+
h3
128+
+ div:first-of-type:before {
124129
content: "Vapi will make a request to your server with the following object:";
125130
font-size: 0.875rem;
126131
}
127132

128-
:is(.light) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
133+
:is(.light)
134+
#\/api-reference\/webhooks\/server-message\#request
135+
h3
136+
+ div:first-of-type:before {
129137
color: #0008059f;
130138
}
131139

132-
:is(.dark) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
140+
:is(.dark)
141+
#\/api-reference\/webhooks\/server-message\#request
142+
h3
143+
+ div:first-of-type:before {
133144
color: #f6f5ffb6;
134145
}
135146

136-
#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type>div:first-of-type {
147+
#\/api-reference\/webhooks\/client-message\#request
148+
h3
149+
+ div:first-of-type
150+
> div:first-of-type {
137151
display: none;
138152
}
139153

140-
#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
154+
#\/api-reference\/webhooks\/client-message\#request
155+
h3
156+
+ div:first-of-type:before {
141157
content: "Vapi will make a request to your server with the following object:";
142158
font-size: 0.875rem;
143159
}
144160

145-
:is(.light) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
161+
:is(.light)
162+
#\/api-reference\/webhooks\/client-message\#request
163+
h3
164+
+ div:first-of-type:before {
146165
color: #0008059f;
147166
}
148167

149-
:is(.dark) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
168+
:is(.dark)
169+
#\/api-reference\/webhooks\/client-message\#request
170+
h3
171+
+ div:first-of-type:before {
150172
color: #f6f5ffb6;
151173
}
152174

@@ -178,4 +200,33 @@
178200

179201
html.dark button[data-highlighted] .fern-api-property-meta {
180202
color: var(--accent-contrast) !important;
181-
}
203+
}
204+
205+
#trieve-search-modal:not(.dark) {
206+
background-color: #fffaea !important;
207+
208+
.chat-footer-wrapper {
209+
background-color: #fffaea !important;
210+
211+
.input-wrapper form input.chat {
212+
background-color: #fffaea !important;
213+
}
214+
}
215+
216+
.trieve-footer {
217+
background-color: #fffaea !important;
218+
}
219+
220+
.input-wrapper .input-flex input {
221+
background-color: #fffaea !important;
222+
}
223+
224+
.trieve-elements-docs {
225+
.item {
226+
background-color: #fffaea !important;
227+
&:hover, &:focus {
228+
background-color: #f8f4e6 !important;
229+
}
230+
}
231+
}
232+
}

fern/assets/trieve-user-script.js

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,26 @@ const removeAllClickListeners = (element) => {
2020
};
2121

2222
const makeDefaultSearchTrieve = async () => {
23+
let defaultSearchBar = null;
2324
try {
24-
let defaultSearchBar = null;
2525
let retries = 0;
2626
while (!defaultSearchBar && retries < 10) {
2727
for (const el of document.querySelectorAll("*")) {
28-
if (el.querySelector('[aria-label="Search"]')) {
29-
defaultSearchBar = el.querySelector('[aria-label="Search"]');
28+
if (el.querySelector('[aria-label="Search"], #fern-search-button')) {
29+
defaultSearchBar = el.querySelector(
30+
'[aria-label="Search"], #fern-search-button'
31+
);
3032
break;
33+
} else {
34+
console.log("Default search bar not found");
3135
}
3236
}
3337
retries++;
3438
await new Promise((resolve) => setTimeout(resolve, 10));
3539
}
40+
if (defaultSearchBar?.hasAttribute("disabled")) {
41+
defaultSearchBar.removeAttribute("disabled");
42+
}
3643
defaultSearchBar = removeAllClickListeners(defaultSearchBar);
3744

3845
defaultSearchBar.onclick = () => {
@@ -44,16 +51,23 @@ const makeDefaultSearchTrieve = async () => {
4451
} catch (e) {
4552
console.error(e);
4653
}
54+
55+
return !!defaultSearchBar;
4756
};
57+
4858
try {
49-
await makeDefaultSearchTrieve();
50-
setTimeout(makeDefaultSearchTrieve, 50);
51-
setTimeout(makeDefaultSearchTrieve, 100);
52-
setTimeout(makeDefaultSearchTrieve, 250);
53-
setTimeout(makeDefaultSearchTrieve, 500);
54-
setTimeout(makeDefaultSearchTrieve, 1000);
55-
setTimeout(makeDefaultSearchTrieve, 2000);
56-
setTimeout(makeDefaultSearchTrieve, 3000);
59+
let defaultSearchBar = null;
60+
let retries = 0;
61+
let sleepTime = 50;
62+
while (!retries < 10) {
63+
defaultSearchBar = await makeDefaultSearchTrieve();
64+
if (defaultSearchBar) {
65+
break;
66+
}
67+
await new Promise((resolve) => setTimeout(resolve, sleepTime));
68+
sleepTime = Math.min(sleepTime * 2, 500);
69+
retries++;
70+
}
5771
} catch (e) {
5872
console.error(e);
5973
}

0 commit comments

Comments
 (0)