Display a soft "Loading..." mask until page is ready #4629
Conversation
sharkykh
force-pushed
the
feature/load-screen
branch
from
6f34a0d
to
0869407
Compare
|
@OmgImAlexis This PR should be merged regardless of our Slack discussion about the P.S. I had a different idea which I couldn't get to work as I wanted it to, unfortunately. |
|
I must say the one with the logo is pretty awesome! But I'm fine with either way 👍 |
| @@ -62,7 +62,12 @@ | |||
| % endif | |||
| <%include file="/partials/alerts.mako"/> | |||
| <div id="content-row" class="row"> | |||
| <div id="content-col" class="${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12"> | |||
| <div v-if="globalLoading" class="text-center ${'col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1' if not app.LAYOUT_WIDE else 'col-lg-12 col-md-12'} col-sm-12 col-xs-12"> | |||
There was a problem hiding this comment.
Could we maybe incorporate this as a separate component?
There was a problem hiding this comment.
I could try,
but I don't think it's worth the effort because we don't plan on keeping it.
There was a problem hiding this comment.
Why not keep it? You always need to load data right?
There was a problem hiding this comment.
I think it will be much less noticeable when it's a true single page application.
Fixes #4618.
Also fixes all the other pages that are not ready when the Vue cloak (
v-cloak) is lowered,Help & Info for example.
I've also tested what happens if there was a javascript error on the page, and the mask was still lowered.
Just in case, I added the handler to manually remove the mask.