Merge branch 'lebihae/betterskeleton' into 'main'

feat(app): improve skeleton UI appearance

See merge request churros/churros!267

.changeset/wicked-seals-tie.md

@@ -0,0 +1,5 @@
+---
+'@churros/app': minor
+---
+
+feat(app): improve skeleton UI appearance

packages/app/src/lib/components/LoadingText.svelte

@@ -6,33 +6,53 @@
   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}
   <svelte:element
     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>
   </slot>
 {/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;
     user-select: none;
 
     &,
     & * {
-      color: var(--skeleton-ui-bg);
+      color: transparent;
       letter-spacing: -0.03em;
+      background-color: var(--skeleton-ui-bg);
+      border-radius: 1000px;
     }
   }
 

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;
 }