From fb45fa1b6b3a78ee333a917916f3367a072d4c5c Mon Sep 17 00:00:00 2001
From: Ewen Le Bihan <hey@ewen.works>
Date: Tue, 22 Oct 2024 23:36:01 +0200
Subject: [PATCH] feat(app): improve skeleton UI appearance

- fix weird gaps between characters
- make the placeholder color less intense
- round (where possible) placeholder corners
---
 .changeset/wicked-seals-tie.md                |  5 ++++
 .../app/src/lib/components/LoadingText.svelte | 28 ++++++++++++++++---
 packages/app/static/colors.css                |  4 +--
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/wicked-seals-tie.md

diff --git a/.changeset/wicked-seals-tie.md b/.changeset/wicked-seals-tie.md
new file mode 100644
index 000000000..bc166258b
--- /dev/null
+++ b/.changeset/wicked-seals-tie.md
@@ -0,0 +1,5 @@
+---
+'@churros/app': minor
+---
+
+feat(app): improve skeleton UI appearance
diff --git a/packages/app/src/lib/components/LoadingText.svelte b/packages/app/src/lib/components/LoadingText.svelte
index b85aeddc8..ee269b1ae 100644
--- a/packages/app/src/lib/components/LoadingText.svelte
+++ b/packages/app/src/lib/components/LoadingText.svelte
@@ -6,6 +6,20 @@
   export let tag: string = 'span';
   export let lines: number | undefined = undefined;
   export let value: MaybeLoading<string | number> | null | undefined = PendingValue;
+
+  let loadingTextSlotContent: HTMLSpanElement | null = null;
+
+  // Text to use as skeleton UI is either the text given in the default slot, or lines of lorem ipsum if lines is specified, or a fallback
+  function loadingTextLines() {
+    let output: string[] = [];
+    if (lines) output = LOREM_IPSUM.split('\n').slice(0, lines);
+    else if (loadingTextSlotContent?.textContent)
+      output = loadingTextSlotContent.textContent.split('\n');
+
+    output = output.filter(Boolean);
+    if (output.length > 0) return output;
+    return ['Chargement...'];
+  }
 </script>
 
 {#if !loaded(value) || value === null}
@@ -13,9 +27,13 @@
     this={tag === 'code' ? 'span' : tag}
     {...$$restProps}
     class="skeleton-text skeleton-effect-wave"
-    ><slot>{lines ? LOREM_IPSUM.split('\n').slice(0, lines).join('\n') : 'Chargement...'}</slot
-    ></svelte:element
   >
+    {#each loadingTextLines() as line}
+      <span>{line}</span>
+      <br />
+    {/each}
+    <span bind:this={loadingTextSlotContent} style:display="none"><slot></slot></span>
+  </svelte:element>
 {:else}
   <slot name="loaded" {value}>
     <svelte:element this={tag} data-loaded {...$$restProps}>{value}</svelte:element>
@@ -23,7 +41,7 @@
 {/if}
 
 <style>
-  .skeleton-text {
+  .skeleton-text span {
     /* no putting in a fallback generic font prevents unsupported skeleton text characters from showing up */
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font-family: skeleton;
@@ -31,8 +49,10 @@
 
     &,
     & * {
-      color: var(--skeleton-ui-bg);
+      color: transparent;
       letter-spacing: -0.03em;
+      background-color: var(--skeleton-ui-bg);
+      border-radius: 1000px;
     }
   }
 
diff --git a/packages/app/static/colors.css b/packages/app/static/colors.css
index 2ebf97e63..b18d17671 100644
--- a/packages/app/static/colors.css
+++ b/packages/app/static/colors.css
@@ -78,7 +78,7 @@ dialog,
   --border-block: 1px;
   --radius-inline: 0.25rem;
   --radius-block: 0.5rem;
-  --skeleton-ui-bg: rgb(0 0 0 / 30%);
+  --skeleton-ui-bg: rgb(225 225 225);
   --backdrop: rgb(0 0 0 / 30%);
   --original-bg: var(
     --bg
@@ -135,7 +135,7 @@ dialog[data-theme-variant='dark']::backdrop {
 
   /* Utility */
   --backdrop: rgb(0 0 0 / 80%);
-  --skeleton-ui-bg: rgb(255 255 255 / 30%);
+  --skeleton-ui-bg: rgb(30 30 30);
   --shadow: 0 0.25rem 0.5rem #000;
 }