From a04201ae01764442943e87591fe07cb6d2577ee8 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 7 Feb 2023 22:48:10 +0100
Subject: [PATCH] UX: implements a random and auto generated skeleton (#20202)

UI is not modified much besides removing the border-bottom, and using only message body.

However instead of having a fix template, this is all automatically generated and random, resulting in a more natural experience.
---
 .../discourse/components/chat-skeleton.hbs    | 126 ++----------------
 .../discourse/components/chat-skeleton.js     |  16 +++
 .../stylesheets/common/chat-skeleton.scss     |  56 ++------
 3 files changed, 35 insertions(+), 163 deletions(-)
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
index f46109445ed..227103171b9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
@@ -1,119 +1,15 @@
 <div class="chat-skeleton -animation">
-  <div class="chat-skeleton__header">
-    <div class="chat-skeleton__header-img"></div>
-    <div class="chat-skeleton__header-name"></div>
-  </div>
-
-  <div class="chat-skeleton__body">
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -small"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -large"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
+  {{#each this.placeholders as |rows|}}
+    <div class="chat-skeleton__body">
+      <div class="chat-skeleton__message">
+        <div class="chat-skeleton__message-avatar"></div>
+        <div class="chat-skeleton__message-poster"></div>
+        <div class="chat-skeleton__message-content">
+          {{#each rows as |row|}}
+            <div class="chat-skeleton__message-msg" style={{row}}></div>
+          {{/each}}
+        </div>
       </div>
     </div>
-  </div>
-
-  <div class="chat-skeleton__header">
-    <div class="chat-skeleton__header-img"></div>
-    <div class="chat-skeleton__header-name"></div>
-  </div>
-
-  <div class="chat-skeleton__body">
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -medium"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -medium"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -small"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -medium"></div>
-        <div class="chat-skeleton__message-msg -line2 -small"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -medium"></div>
-        <div class="chat-skeleton__message-msg -line2 -medium"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="chat-skeleton__header">
-    <div class="chat-skeleton__header-img"></div>
-    <div class="chat-skeleton__header-name"></div>
-  </div>
-
-  <div class="chat-skeleton__body">
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -small"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -medium"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -large"></div>
-        <div class="chat-skeleton__message-msg -line2 -small"></div>
-      </div>
-    </div>
-
-    <div class="chat-skeleton__message">
-      <div class="chat-skeleton__message-avatar"></div>
-      <div class="chat-skeleton__message-poster"></div>
-      <div class="chat-skeleton__message-content">
-        <div class="chat-skeleton__message-msg -line1 -medium"></div>
-        <div class="chat-skeleton__message-msg -line2 -large"></div>
-      </div>
-    </div>
-  </div>
+  {{/each}}
 </div>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js b/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js
new file mode 100644
index 00000000000..3710d8dcc9b
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js
@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import { htmlSafe } from "@ember/template";
+
+export default class ChatSkeleton extends Component {
+  get placeholders() {
+    return Array.from({ length: 15 }, () => {
+      return Array.from({ length: this.#randomIntFromInterval(1, 5) }, () => {
+        return htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
+      });
+    });
+  }
+
+  #randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
index 36beaa46676..100a6153044 100644
--- a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
@@ -3,32 +3,8 @@ $radius: 10px;
 .chat-skeleton {
   height: auto;
 
-  &__header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 1em;
-    border-bottom: 1px solid var(--primary-100);
-    box-sizing: border-box;
-  }
-
-  &__header-img {
-    background-color: var(--primary-100);
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    margin-right: 0.5rem;
-  }
-
-  &__header-name {
-    background-color: var(--primary-100);
-    width: 70px;
-    height: 18px;
-    border-radius: $radius;
-  }
-
   &__body {
-    padding: 1em;
+    padding: 0.5em 1em;
   }
 
   &__message {
@@ -52,10 +28,10 @@ $radius: 10px;
     border-radius: 50%;
     margin-right: 0.5rem;
 
-    .chat-skeleton__message:nth-of-type(odd) & {
+    .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
     }
-    .chat-skeleton__message:nth-of-type(even) & {
+    .chat-skeleton__body:nth-of-type(even) & {
       background-color: var(--primary-200);
     }
   }
@@ -68,10 +44,10 @@ $radius: 10px;
     height: 20px;
     border-radius: $radius;
 
-    .chat-skeleton__message:nth-of-type(odd) & {
+    .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
     }
-    .chat-skeleton__message:nth-of-type(even) & {
+    .chat-skeleton__body:nth-of-type(even) & {
       background-color: var(--primary-200);
     }
   }
@@ -83,30 +59,14 @@ $radius: 10px;
   &__message-msg {
     height: 13px;
     border-radius: $radius;
+    margin: 5px 0;
 
-    .chat-skeleton__message:nth-of-type(odd) & {
+    .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
     }
-    .chat-skeleton__message:nth-of-type(even) & {
+    .chat-skeleton__body:nth-of-type(even) & {
       background-color: var(--primary-200);
     }
-
-    &.-line1 {
-      margin-top: 0.5rem;
-      margin-bottom: 0.5em;
-    }
-
-    &.-small {
-      width: 35%;
-    }
-
-    &.-medium {
-      width: 60%;
-    }
-
-    &.-large {
-      width: 85%;
-    }
   }
 
   &.-animation {