Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Commit 683aeaa

Browse files
toolmantimtoolmantim
authored
Adding loading messages and buttons to Cody App loading screen (#57461)
1 parent 94c57a0 commit 683aeaa

File tree

1 file changed

+145
-7
lines changed

1 file changed

+145
-7
lines changed

‎client/app-shell/static/index.html‎

Lines changed: 145 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
--bg-purple: rgb(161, 18, 255, 0.075);
2323
--red: rgb(255, 85, 67);
2424
--blue: rgb(0, 203, 236);
25+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
26+
text-align: center;
2527
}
2628

2729
:root,
@@ -38,7 +40,26 @@
3840
background: var(--bg-purple);
3941
}
4042

41-
svg path {
43+
body > div {
44+
width: 100%;
45+
}
46+
47+
.loading-animation {
48+
transform: translateY(0px);
49+
/* Cody autocompleted both the timing function and keyframes! */
50+
animation: 250ms shove-face-up 5s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
51+
}
52+
53+
@keyframes shove-face-up {
54+
from {
55+
transform: translateY(0px);
56+
}
57+
to {
58+
transform: translateY(-10px);
59+
}
60+
}
61+
62+
.loading-animation svg path {
4263
stroke-width: 3;
4364
stroke-linecap: round;
4465
stroke-dasharray: 1;
@@ -114,15 +135,132 @@
114135
--translate-y-to: -6.8px;
115136
--pulse-delay-offset: 0.222s;
116137
}
138+
139+
.messages {
140+
position: absolute;
141+
top: 50%;
142+
left: 50%;
143+
transform: translateY(-50%) translateX(-50%);
144+
font-size: 13px;
145+
font-weight: 500;
146+
opacity: 0.8;
147+
width: 100%;
148+
--final-opacity: 0;
149+
--duration: 4s;
150+
--initial-delay: 5s;
151+
}
152+
153+
.messages__message {
154+
position: absolute;
155+
top: 0;
156+
left: 50%;
157+
transform: translateX(-50%);
158+
opacity: 0;
159+
animation: var(--duration) ease-in-out 0s forwards message-appear;
160+
margin: 0;
161+
}
162+
.messages__message:nth-child(1) { animation-delay: var(--initial-delay); }
163+
.messages__message:nth-child(2) { animation-delay: calc(var(--initial-delay) + (var(--duration) * 1)); }
164+
.messages__message:nth-child(3) { animation-delay: calc(var(--initial-delay) + (var(--duration) * 2)); }
165+
.messages__message:nth-child(4) { animation-delay: calc(var(--initial-delay) + (var(--duration) * 3)); }
166+
.messages__message:nth-child(5) { animation-delay: calc(var(--initial-delay) + (var(--duration) * 4)); }
167+
.messages__message:nth-child(6) { animation-delay: calc(var(--initial-delay) + (var(--duration) * 5)); }
168+
.messages__message:last-child { --final-opacity: 1; }
169+
170+
@keyframes message-appear {
171+
from { opacity: 0; }
172+
4% { opacity: 1; }
173+
96% { opacity: 1; }
174+
to { opacity: var(--final-opacity); }
175+
}
176+
177+
.show-logs {
178+
display: flex;
179+
flex-direction: column;
180+
width: 100%;
181+
gap: 5px;
182+
position: absolute;
183+
text-align: center;
184+
bottom: 50px;
185+
font-size: 12px;
186+
opacity: 0;
187+
transform: scale(0);
188+
animation: 1s show-log-link 30s forwards;
189+
}
190+
191+
@keyframes show-log-link {
192+
from { opacity: 0; transform: scale(1); }
193+
to { opacity: 1; transform: scale(1); }
194+
}
195+
196+
.show-logs p {
197+
margin: 0;
198+
}
199+
200+
.show-logs a {
201+
display: inline-block;
202+
border-radius: 6px;
203+
line-height: 1;
204+
padding: 6px 8px;
205+
}
206+
207+
.show-logs a, .show-logs a:visited {
208+
color: var(--blue);
209+
text-decoration: none;
210+
font-weight: 600;
211+
opacity: 1;
212+
background-color: rgba(0, 203, 236, 0);
213+
}
214+
.show-logs a:hover {
215+
background-color: rgba(0, 203, 236, 0.2);
216+
color: rgb(109, 236, 255);
217+
}
218+
.show-logs a svg {
219+
margin-right: 2px;
220+
vertical-align: middle;
221+
}
117222
</style>
118223
</head>
119224
<body>
120-
<svg viewbox="0 0 24 24" width="32" height="32" aria-label="Starting up Cody...">
121-
<path class="mouth" d="M5.2,14.8c0,0,1.6,3.6,6.9,3.6s6.9-3.6,6.9-3.6" pathLength="1" />
122-
<path class="left-eye" d="M6.2,8.3h2h2" pathLength="1" />
123-
<path class="right-eye" d="M16.4,5.7v2v2" pathLength="1" />
124-
</svg>
125-
225+
<div>
226+
<div class="loading-animation">
227+
<svg viewbox="0 0 24 24" width="32" height="32" aria-label="Starting up Cody...">
228+
<path class="mouth" d="M5.2,14.8c0,0,1.6,3.6,6.9,3.6s6.9-3.6,6.9-3.6" pathLength="1" />
229+
<path class="left-eye" d="M6.2,8.3h2h2" pathLength="1" />
230+
<path class="right-eye" d="M16.4,5.7v2v2" pathLength="1" />
231+
</svg>
232+
</div>
233+
<div class="messages">
234+
<p class="messages__message">Initializing</p>
235+
<p class="messages__message">Starting Embeddings Service</p>
236+
<p class="messages__message">Starting Chat Service</p>
237+
<p class="messages__message">Starting Git Service</p>
238+
<p class="messages__message">Reticulating Splines</p>
239+
<p class="messages__message">Initializing</p>
240+
</div>
241+
<div class="show-logs">
242+
<p>
243+
<a href="" onclick="__TAURI__.invoke('show_logs').catch(console.error)">
244+
<svg viewBox="0 0 20 20" fill="currentColor" width="20px" height="20px">
245+
<path fill-rule="evenodd"
246+
d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
247+
clip-rule="evenodd" />
248+
</svg>
249+
<span>Show Logs</span>
250+
</a>
251+
</p>
252+
<p>
253+
<a href="mailto:support@sourcegraph.com?subject=Cody%20App%20loading">
254+
<svg viewBox="0 0 20 20" fill="currentColor" width="20px" height="20px">
255+
<path fill-rule="evenodd"
256+
d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902.848.137 1.705.248 2.57.331v3.443a.75.75 0 001.28.53l3.58-3.579a.78.78 0 01.527-.224 41.202 41.202 0 005.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0010 2zm0 7a1 1 0 100-2 1 1 0 000 2zM8 8a1 1 0 11-2 0 1 1 0 012 0zm5 1a1 1 0 100-2 1 1 0 000 2z"
257+
clip-rule="evenodd" />
258+
</svg>
259+
<span>Contact Support</span>
260+
</a>
261+
</p>
262+
</div>
263+
</div>
126264
<script type="module" src="/scripts/app-shell.js"></script>
127265
</body>
128266
</html>

0 commit comments

Comments
 (0)