mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 21:50:24 +08:00
c2d94be06e
In the past, our loading spinner implementation used Ember's loading substate. That meant that, when the site setting was toggled, there would be fundamental changes in the routing behavior.
This commit simplifies things so that the (non-default) loading spinner implementation is purely a styling thing, and behaves exactly the same as the spinner which appears under the 'slider' configuration when loading takes too long.
This does involve a slight UX change. Now, the entire page will be replaced by a loading spinner instead of just the relevant `{{outlet}}`. We strongly recommend sites use the new default 'slider' behavior.
68 lines
1.3 KiB
SCSS
68 lines
1.3 KiB
SCSS
.loading-indicator-container {
|
|
--loading-width: 0.8;
|
|
--still-loading-width: 0.9;
|
|
|
|
--still-loading-duration: 10s;
|
|
--done-duration: 0.4s;
|
|
--fade-out-duration: 0.4s;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: z("header") + 1;
|
|
|
|
height: 3px;
|
|
width: 100%;
|
|
|
|
opacity: 0;
|
|
transition: opacity var(--fade-out-duration) ease var(--done-duration);
|
|
|
|
background-color: var(--primary-low);
|
|
|
|
.loading-indicator {
|
|
height: 100%;
|
|
width: 100%;
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
background-color: var(--tertiary);
|
|
}
|
|
|
|
&.loading,
|
|
&.still-loading {
|
|
opacity: 1;
|
|
transition: opacity 0s;
|
|
}
|
|
|
|
&.loading .loading-indicator {
|
|
transition: transform var(--loading-duration) ease-in;
|
|
transform: scaleX(var(--loading-width));
|
|
}
|
|
|
|
&.still-loading .loading-indicator {
|
|
transition: transform var(--still-loading-duration) linear;
|
|
transform: scaleX(var(--still-loading-width));
|
|
}
|
|
|
|
&.done .loading-indicator {
|
|
transition: transform var(--done-duration) ease-out;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
&.discourse-hub-webview {
|
|
// DiscourseHub obscures the top 1px to work around an iOS bug
|
|
top: 1px;
|
|
}
|
|
|
|
body.footer-nav-ipad & {
|
|
top: var(--footer-nav-height);
|
|
}
|
|
}
|
|
|
|
.route-loading-spinner {
|
|
padding-top: 1.8em;
|
|
}
|
|
|
|
body.has-route-loading-spinner #main-outlet {
|
|
display: none;
|
|
}
|