diff --git a/src/components/header.ts b/src/components/header.ts index 301a187..7a6a72a 100644 --- a/src/components/header.ts +++ b/src/components/header.ts @@ -31,7 +31,7 @@ export class AppHeader extends LitElement { margin-top: 0; margin-bottom: 0; font-size: 12px; - font-weight: bold; + font-weight: normal; color: black; } diff --git a/src/components/message-skeleton.ts b/src/components/message-skeleton.ts new file mode 100644 index 0000000..2101c1a --- /dev/null +++ b/src/components/message-skeleton.ts @@ -0,0 +1,58 @@ +import { LitElement, html, css } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('message-skeleton') +export class MessageSkeleton extends LitElement { + static styles = [ + css` + :host { + display: block; + + overflow-x: hidden; + } + + .skeleton { + background: #ffffff0f; + margin-bottom: 4px; + + width: 48vw; + height: 25px; + border-radius: 4px; + + overflow-x: hidden; + } + + .shimmer { + background: linear-gradient(to right, #ffffff0f, #5c5c5c , #ffffff0f); + animation: shimmer 3s infinite linear; + } + + + @media(prefers-color-scheme: light) { + .skeleton { + background: #e1e1e1; + } + + .shimmer { + background: linear-gradient(to right, #e1e1e1, #f1f1f1 , #e1e1e1); + } + } + + @keyframes shimmer { + from { + transform: translateX(-200%); + } + to { + transform: translateX(200%); + } + } + ` + ]; + + render() { + return html` +
+
+ `; + } +} \ No newline at end of file diff --git a/src/pages/app-home.ts b/src/pages/app-home.ts index 174ff53..67b4e0c 100644 --- a/src/pages/app-home.ts +++ b/src/pages/app-home.ts @@ -10,6 +10,7 @@ import { styles } from '../styles/shared-styles'; import { classMap } from 'lit/directives/class-map.js'; import '../components/loading-toast'; +import '../components/message-skeleton'; @customElement('app-home') export class AppHome extends LitElement { @@ -181,7 +182,7 @@ export class AppHome extends LitElement { ...this.previousMessages, { type: "assistant", - content: "" + content: "" } ];