diff --git a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs
index 629092f1ce0..2f7f9d1ba5f 100644
--- a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs
+++ b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs
@@ -1,3 +1,5 @@
-{{#if this.loadingSlider.stillLoading}}
-
{{loading-spinner}}
+{{#if this.shouldDisplay}}
+ {{loading-spinner}}
+ {{body-class "has-route-loading-spinner"}}
+ {{hide-application-footer}}
{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js
index 5cb2fddc892..45a4a995cff 100644
--- a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js
+++ b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js
@@ -3,4 +3,11 @@ import { inject as service } from "@ember/service";
export default class LoadingSliderFallbackSpinner extends Component {
@service loadingSlider;
+
+ get shouldDisplay() {
+ const { mode, loading, stillLoading } = this.loadingSlider;
+ return (
+ (mode === "spinner" && loading) || (mode === "slider" && stillLoading)
+ );
+ }
}
diff --git a/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs b/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs
index f895371072f..6393272cd34 100644
--- a/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs
+++ b/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs
@@ -1,4 +1,4 @@
-{{#if this.loadingSlider.enabled}}
+{{#if (eq this.loadingSlider.mode "slider")}}
{
- this.loadingSlider.transitionEnded();
- });
- return false;
- } else {
- return true; // Use native ember loading implementation
- }
+ this.loadingSlider.transitionStarted();
+ transition.finally(() => {
+ this.loadingSlider.transitionEnded();
+ });
+ return false;
},
actions: {
diff --git a/app/assets/javascripts/discourse/app/services/loading-slider.js b/app/assets/javascripts/discourse/app/services/loading-slider.js
index 850a2ee644e..2150bf3f6b7 100644
--- a/app/assets/javascripts/discourse/app/services/loading-slider.js
+++ b/app/assets/javascripts/discourse/app/services/loading-slider.js
@@ -74,8 +74,8 @@ export default class LoadingSlider extends Service.extend(Evented) {
timer = new Timer();
- get enabled() {
- return this.siteSettings.page_loading_indicator === "slider";
+ get mode() {
+ return this.siteSettings.page_loading_indicator;
}
get averageLoadingDuration() {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js b/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js
index af62e697e3d..9efa91019a8 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js
@@ -11,6 +11,9 @@ import AboutFixtures from "discourse/tests/fixtures/about";
import pretender from "discourse/tests/helpers/create-pretender";
import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+const SPINNER_SELECTOR =
+ "#main-outlet-wrapper .route-loading-spinner div.spinner";
+
// Like settled(), but ignores timers, transitions and network requests
function isMostlySettled() {
let { hasRunLoop, hasPendingWaiters, isRenderPending } = getSettledState();
@@ -54,15 +57,15 @@ acceptance("Page Loading Indicator", function (needs) {
const aboutRequest = await pendingRequest;
await mostlySettled();
- assert.strictEqual(currentRouteName(), "about_loading");
- assert.dom("#main-outlet > div.spinner").exists();
+ assert.strictEqual(currentRouteName(), "discovery.latest");
+ assert.dom(SPINNER_SELECTOR).exists();
assert.dom(".loading-indicator-container").doesNotExist();
pretender.resolve(aboutRequest);
await settled();
assert.strictEqual(currentRouteName(), "about");
- assert.dom("#main-outlet > div.spinner").doesNotExist();
+ assert.dom(SPINNER_SELECTOR).doesNotExist();
assert.dom("#main-outlet section.about").exists();
});
@@ -80,7 +83,7 @@ acceptance("Page Loading Indicator", function (needs) {
await mostlySettled();
assert.strictEqual(currentRouteName(), "discovery.latest");
- assert.dom("#main-outlet > div.spinner").doesNotExist();
+ assert.dom(SPINNER_SELECTOR).doesNotExist();
await waitUntil(() =>
query(".loading-indicator-container").classList.contains("loading")
diff --git a/app/assets/stylesheets/common/loading-slider.scss b/app/assets/stylesheets/common/loading-slider.scss
index dc4be5e46aa..9f37ee66da9 100644
--- a/app/assets/stylesheets/common/loading-slider.scss
+++ b/app/assets/stylesheets/common/loading-slider.scss
@@ -58,17 +58,10 @@
}
}
-.loading-slider-fallback-spinner {
+.route-loading-spinner {
padding-top: 1.8em;
+}
+
+body.has-route-loading-spinner #main-outlet {
display: none;
}
-
-body.still-loading {
- .loading-slider-fallback-spinner {
- display: block;
- }
-
- #main-outlet {
- display: none;
- }
-}