Horizontal loading slider

[riking (Kane York)]

@awesomerobot

I agree that keeping some motion ongoing is ideal, but it might not be possible without changing the way it’s implemented entirely…

Oooh, I think that’s happening because the content did load, and there’s a large hitch of HTML Parse / Style Cascading / Layout / Render, during which the animation can’t move.

[Matze]

.loading-indicator-container .loading-indicator, .loading-indicator-container {
    background-color:#FFCC00;
}

I tried to change the color in the CSS of the theme but it stays blue. Any help?

[david (David Taylor)]

@riking

Oooh, I think that’s happening because the content did load, and there’s a large hitch of HTML Parse / Style Cascading / Layout / Render, during which the animation can’t move.

Yeah exactly. The single-threaded nature of the JS / DOM rendering means that we drop loads of frames while rendering a topic . The slider is ‘moving’ the whole time, it’s just that the frames never get rendered.

@Canapin

If we click from a profile view to the Discourse logo, the upper part disappears, which looks weird.

Thanks. I just tidied that up in core, so it will be fixed here on Meta very soon.

@awesomerobot

I just realized you can test the fade in (kinda) with the table of contents component (because it fades in the post), for example… visit: PostgreSQL 13 update . I don’t think it feels particularly faster… but it is definitely “softer”

I’ll get a fade-in going on Meta today so we can see how it feels. Although obviously if we do that, we’ll want to remove other fade-ins like the TOC component.

Edit: that’s done. Fade-in enabled on meta

@Matze

I tried to change the color in the CSS of the theme but it stays blue. Any help?

Depending on the order that your themes/components get loaded, that might not work. You need to make the selector ‘more specific’ than the loading slider component CSS. The simplest thing is probably to add !important to the background-color. You’ll also want to remove the container selector, otherwise the background will be the same as the foreground:

.loading-indicator-container .loading-indicator {
    background-color:#FFCC00 !important;
}

[P16]

@david

I’ll get a fade-in going on Meta today so we can see how it feels. Although obviously if we do that, we’ll want to remove other fade-ins like the TOC component.

Edit: that’s done. Fade-in enabled on meta

Thanks David looks great!

[david (David Taylor)]

@Falco

Next level play: record how long requests take on average

It now takes an average of the last 5 page loads, and uses that to set the speed of the bar

[dodesz (Don)]

Hi David,

This loader getting better and better Keep the great work.

@david

It now takes an average of the last 5 page loads, and uses that to set the speed of the bar

With this new update it looks more dynamic

---

I just notice one thing about this in category. I use the create topic button rename.
With Loading Slider it doesn’t refresh the button text. I just notice this because it might cause problem with other scripts.

How to create a new topic button with category and topic template

Yes, that would also be possible as well. You can use something like this in the header section of a theme component <script type="text/discourse-plugin" version="0.8"> const i18nTopicLable = I18n.lookup("topic.create"); api.modifyClass("component:create-topic-button", { didInsertElement: function() { var button = $(this), category = button[0].parentView.get("category"), label = button[0].label, newTopicLabel = "topic.create", buttonText = ""; if (category) { …

Demo (on this video i click a category which has other create topic text and go to other category which has the default create topic button.) After i refresh the whole page it show the correct text.

[Jonathan5]

The fading in/out is an improvement. But I still find the slider a distraction. I find myself looking at it, meaning I’m slower to be ready to read the page when it loads. With the spinner, it was in one place so was easy not to look at, and the suddenness makes me think of speed (maybe wrongly).

It may be that on slow connections the slider is better as you get a feel for how slow/fast the page is loading. I don’t know about that.

[frold]

For me when using a mobile phone the slider is located at the top of the screen while the old one is located more in the middle of the screen aprox 30% from the top…

Instead of keeping your eyes focused on the center off your phone they make movement up and down, up and down… just my 2 cents…

[dodesz (Don)]

I’m agree with this. I think that would be the best if Loading Slider works on desktop only and on mobile maybe keep the spinner. The spinner is more feels like using an app which is good on mobile. Just like YouTube use the loaders.

[Jonathan5]

Yes, I’ve been using it on an iPhone so my comments really related to mobile.

[neounix (Dark Matter)]

Love the concept. I’m a big fan of sliders v. spinners.

Enabled and tried on many themes (Dark, Alien, Vincent, Star Wars, etc) on both 27" and 34" ROG monitors. Could barely see the loading slider. Seems very thin. On “dark” themes the thin line seemed too soft of a color to really notice.

Also tried the slider on mobile, iPhone 6s and iPhone 6+. Similar comments. Barely noticeable.

Trying not to be a social party-pooper, but objectively speaking, the slider seems promising but needs additional CSS work (IMO), and so we went back to the spinner on our site for now, since it is noticeable and tells the “reloading story clearly”. When I have time, I will enable again and work on the CSS for our site; since this looks really promising!

Looks very promising!

Thanks and keep up the good work!

PS: No speed issues. I’m on (just off) our national fiber backbone, on a dedicated fiber to the main backbone.

[seanblue]

I just want to mention that I don’t really care for the new UX behavior when selecting categories, topics, etc., where the current view becomes faded before the new page loads. I think the old approach of just having a blank page with a spinner was a much nicer experience.

In either case the page changes twice. But because spinners are universal things, it didn’t really feel like the page changed twice. It felt like it was preparing to change, and then changed once. Now it feels like it’s changing twice, because there is still content after both transitions, once faded and once for the new page content. It’s hard to pin down exactly why I don’t like it, but I think it’s because there’s no longer a universal loading view. Now there are effectively an infinite number of different loading views, and I find the fade-then-load loading view to be distracting since the background content is different every time I transition to a new page.

[david (David Taylor)]

@dodesz

I just notice one thing about this in category. I use the create topic button rename.
With Loading Slider it doesn’t refresh the button text. I just notice this because it might cause problem with other scripts.

Some things that use didInsertElement hooks will need updating, yeah. With the old spinner, all elements on the page would be destroyed and recreated. With this new system, Ember will reuse elements if possible. Which might actually make rendering a little faster, but could create some bugs if customisations are not following normal ember patterns. We’ll have to work through and clean those up as we notice them.

Do you have the code for your customizations in a git repo you could share?

That’s the main reason I want to experiment with this as a theme component for a little while longer - we’ll be able to catch as many issues as possible before moving it into core.

[dodesz (Don)]

Sure, here is the repo. Thank you

https://github.com/VaperinaDEV/category-btn-name

[seanblue]

I think there’s a mobile bug (at least on iPhone) with this new feature. If you select “Latest” from the navigation dropdown, when the page loads the dropdown properly goes away. But if you select “New” or “Unread” (possibly others), the dropdown is still visible. It doesn’t happen 100% of the time, but often enough that it should be easily reproducible. Note that this did happen sometimes with the old version, but only with “Latest” and never with “New” or “Unread”.

[david (David Taylor)]

Thanks @dodesz - I had a play with this and I think this is a better way of doing it, which should work with the new slider: https://github.com/VaperinaDEV/category-btn-name/pull/1 (sorry if I messed up any of the Hungarian). That kind of pattern should be useful if others need to update their components as well (using computed properties rather than didInsertElement and JQuery).

@seanblue

the dropdown is still visible

added to my list to investigate, thanks

[dodesz (Don)]

OMG Thank you David! Works perfect

[dodesz (Don)]

The Groups and Users menu button still use spinner loader.

[dodesz (Don)]

Is that possible to add the loading slider when click the topic title (which scroll to top) in topics?

[seanblue]

Submitting a post also still shows the spinner.