Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: User card loading (#7404)

This commit is contained in:
Tim Lange 2019-04-24 10:55:09 +02:00 committed by Dan Ungureanu
parent 5b934cb33d
commit 104a9e79f9
3 changed files with 266 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/components/user-card-contents.js.es6
View File

@ -150,6 +150,9 @@ export default Ember.Component.extend(
}, },
_showCallback(username, $target) { _showCallback(username, $target) {
this._positionCard($target);
this.setProperties({ visible: true, loading: true });
const args = { stats: false }; const args = { stats: false };
args.include_post_count_for = this.get("topic.id"); args.include_post_count_for = this.get("topic.id");
User.findByUsername(username, args) User.findByUsername(username, args)
@ -160,8 +163,7 @@ export default Ember.Component.extend(
user.topic_post_count[args.include_post_count_for] user.topic_post_count[args.include_post_count_for]
); );
} }
this._positionCard($target); this.setProperties({ user });
this.setProperties({ user, visible: true });
}) })
.catch(() => this._close()) .catch(() => this._close())
.finally(() => this.set("loading", null)); .finally(() => this.set("loading", null));

21
app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
View File

@ -1,6 +1,25 @@
{{#if visible}} {{#if visible}}
<div class="card-content"> <div class="card-content">
{{#if loading}}
<div class="card-row first-row">
<div class="user-card-avatar">
<div class="card-avatar-placeholder animated-placeholder"></div>
</div>
</div>
<div class="card-row second-row">
<div class="animated-placeholder"></div>
</div>
<div class="card-row third-row">
<div class="animated-placeholder"></div>
</div>
<div class="card-row fourth-row">
<div class="animated-placeholder"></div>
</div>
<div class="card-row sixth-row">
<div class="animated-placeholder"></div>
</div>
{{else}}
<div class="card-row first-row"> <div class="card-row first-row">
<div class="user-card-avatar"> <div class="user-card-avatar">
{{#if user.profile_hidden}} {{#if user.profile_hidden}}
@ -218,6 +237,6 @@
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}
{{/if}}
</div> </div>
{{/if}} {{/if}}

38
app/assets/stylesheets/common/components/user-card.scss
View File

@ -2,6 +2,44 @@ $card_width: 580px;
$avatar_width: 120px; $avatar_width: 120px;
$avatar_margin: -50px; // negative margin makes avatars extend above cards $avatar_margin: -50px; // negative margin makes avatars extend above cards
// placeholder
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.animated-placeholder {
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: $primary-low;
background: linear-gradient(
to right,
$primary-low 10%,
$primary-low-mid 18%,
$primary-low 33%
);
height: 20px;
position: relative;
}
.card-avatar-placeholder {
width: $avatar_width;
height: $avatar_width;
border-radius: 100%;
animation-duration: 5s;
background: linear-gradient(
to right,
$primary-low 10%,
$primary-low-mid 38%,
$primary-low 73%
);
}
// shared styles for user and group cards // shared styles for user and group cards
#user-card, #user-card,
#group-card { #group-card {