mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-11 11:19:58 +08:00
e2874bc3cb
* fix pending chatbot message styling * border fixes * add changeset * add changeset * ensure null messages arent shown * add hide css again * render loading inside message + add test * fix test * add changeset * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
47 lines
950 B
Svelte
47 lines
950 B
Svelte
<script lang="ts">
|
|
export let layout = "bubble";
|
|
</script>
|
|
|
|
<div
|
|
class="message pending"
|
|
role="status"
|
|
aria-label="Loading response"
|
|
aria-live="polite"
|
|
style:border-radius={layout === "bubble" ? "var(--radius-xxl)" : "none"}
|
|
>
|
|
<span class="sr-only">Loading content</span>
|
|
<div class="dot-flashing" />
|
|
|
|
<div class="dot-flashing" />
|
|
|
|
<div class="dot-flashing" />
|
|
</div>
|
|
|
|
<style>
|
|
.pending {
|
|
background: var(--background-fill-secondary);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-self: center;
|
|
gap: 2px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.dot-flashing {
|
|
animation: dot-flashing 1s infinite linear alternate;
|
|
border-radius: 5px;
|
|
background-color: var(--body-text-color);
|
|
width: 5px;
|
|
height: 5px;
|
|
color: var(--body-text-color);
|
|
}
|
|
.dot-flashing:nth-child(2) {
|
|
animation-delay: 0.33s;
|
|
}
|
|
.dot-flashing:nth-child(3) {
|
|
animation-delay: 0.66s;
|
|
}
|
|
</style>
|