User more info - Cache results and render optimization

feature
21

I figured out how to get the avatar from the Cache and also worked on another animation. Maybe that one suits more :slight_smile:

This is now like these Facebook “wireframes” you can see on their app ( also animated like them )

Peek%202019-04-19%2000-08
Peek 2019-04-19 00-08.gif869×331 103 KB

8 Likes
22

Nice! Can you test with allowing full names? Also how does this look on mobile?

4 Likes
23

@sam here with full name and on mobile :slight_smile:

Peek%202019-04-19%2000-12
Peek 2019-04-19 00-12.gif420×830 309 KB

7 Likes
24

Now for another tricky one :slight_smile: what happens on second click?

Not 100% sure how much data we want to keep in memory on the client, so for now I am just curious

3 Likes
25

But first of all, the loading animation was that long in the gifs because I added a sleep of 1000ms so you could see the animation better.

Here it is without sleep and two clicks:

Peek%202019-04-19%2000-16
Peek 2019-04-19 00-16.gif722×285 161 KB

7 Likes
26

This is now available :tada:

https://github.com/discourse/discourse/pull/7404

@venarius Any chances you could get it to pass the avatar, username and full name that is already available in the topic view to the user card?

It’s ok if it doesn’t work all the time we show the user card, but in the topic view, it should immediately show these information.

6 Likes
27

Tried a lot of variations but one just came to my mind :slight_smile: Will try it and see if that works!

5 Likes
28

I super :heart_eyes: this change @venarius!

I like it so much in fact, I am wondering if you can change to those fancier animated grey bars for the pre-loading new posts placeholder in the post stream as you scroll down, here:

image
image.png1526×847 36.2 KB

(could perhaps use some alignment fixes as well now that I’m looking closely at it)

If anyone wants to test this themselves, here’s a protip for Chrome – bring up the f12 developer tools, within Console, use the hamburger to select “Show console drawer”, within the console drawer look for “network throttling” and select “Slow 3G”:

image
image.png729×567 22.3 KB

10 Likes
29

Yes, of course :slight_smile: Will have a look

5 Likes
30

Opened a PR for the animation

https://github.com/discourse/discourse/pull/7434

3 Likes
31

After having used this, I find the loading animation a bit jarring for two reasons:

  • I never experience a large delay on these cards - both on Meta and on my own site they typically load in less than half a second. The animation just adds an extra ‘flash’ to the screen.
  • This is a personal taste, but the animation feels too ‘massive’ to me. The card is quite large and there’s a lot of ‘moving pixels’ - this is especially true on mobile.

I can appreciate that this is useful for some sites, but I’d rather not use it on mine. Can I disable the animation with some custom CSS?

And for this too please :slight_smile: I guess I’m more of a minimalist.

1 Like
32

Yeah, we’ll be taming it down a bit. It’s been tamed down a bit in PR#7434

It should work if you set animation: none on the appropriate classes.

2 Likes
33

I figured, but I have a hard time figuring out the class as the animation disappears from view so quickly :slight_smile: Which ones should I use?