#topic-progress Element Keeps Visibility While Loading

The #topic-progress element appears in an anti-pattern fashion while the spinner is visible.

You can regenerate the behavior, just open a topic and click on the title link on top using mobile view to provoke the spinner.

Any ideas how to hide the #topic-progress while the spinner is visible?

1 Like

Can you repro it here, or is it specific to that site?

1 Like

Surprisingly the meta is exempted from this flaw, but I was able to reproduce it in our production servers and almost all other sites I know.

Another example:

Edit: it appears that when a topic has many posts, the (topic progress) element will not be visible without scrolling. That’s why I couldn’t reproduce it in some sites before like meta.

I support doing something with the mobile topic progress widget during the time the next batch is loading. It sound like a reasonable refinement but I am not sure if a full hide is what we are after.

Hiding the full timeline would be an anti pattern cause stuff would bounce.

@design any thoughts?

Clearly not something we need to rush to change but may be an interesting thing to refine.

2 Likes

Thanks for your response, I understand your concern about the bounce caused by hiding the full timeline, that’s why only reserving a padding space will be playable.

It’s not entirely a CSS issue, sticking or padding the topic progress down while the spinner is active is JavaScript related though.

I’m still curious why it can’t be reproduced here. Can it be reproduced on try.discourse.org ? Is it specific to the CSS layout of those sites, e.g. additional headers and so forth?

1 Like

Actually I was able to reproduce it here as per my reply above.

2 Likes

Oh good – sorry, I missed that.

1 Like

I don’t think it’ll cause bounce on mobile because we use fixed position when scrolling and absolute positioning when it docks, so it’s never influencing the layout anyway.

I did a quick test where I just hide it with css when it gets the docked class (because that’s why the positioning jumps when loading; the page is short and the progress bar docks)… no bounce when it disappears/reappears

The other option is to undock it and keep it in a fixed position while loading, but the problem with that is if you’re jumping up to the top of the page from all the way at the bottom (like when you’re at suggested topics)… I think you’d see a position jump when the timeline goes from docked to a fixed position?

Anyway, I’ll try it out and see what works best.

3 Likes