github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-03 16:56:29 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: implements a random and auto generated skeleton (#20202)

Browse Source 
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.
This commit is contained in:
Joffrey JAFFEUX
2023-02-07 22:48:10 +01:00
committed by GitHub
parent b755b45029
commit a04201ae01
3 changed files with 35 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
View File

@ -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>

16
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js Normal file
View File

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