From 6ba82599188a02c84d94049d02bfd0a9bd0632d9 Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Tue, 18 Jul 2023 12:30:27 -0500
Subject: [PATCH] DEV: Add loading spinner to history modal (#22666)

https://github.com/discourse/discourse/assets/50783505/b5f510a8-719c-461c-a02f-a8b3a8573466
---
 .../app/components/modal/history.hbs          | 56 ++++++++++---------
 .../discourse/app/components/modal/history.js |  2 +-
 .../components/modal/history/revisions.hbs    |  1 +
 .../edit-notification-click-test.js           |  1 -
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/history.hbs b/app/assets/javascripts/discourse/app/components/modal/history.hbs
index 30ffa5425fa..ebe00483c63 100644
--- a/app/assets/javascripts/discourse/app/components/modal/history.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/history.hbs
@@ -4,33 +4,35 @@
   class="history-modal"
 >
   <:body>
-    <Modal::History::Revision
-      @model={{this.postRevision}}
-      @mobileView={{this.site.mobileView}}
-      @wikiDisabled={{this.wikiDisabled}}
-      @previousCategory={{this.previousCategory}}
-      @currentCategory={{this.currentCategory}}
-      @displayInline={{this.displayInline}}
-      @displaySideBySide={{this.displaySideBySide}}
-      @displaySideBySideMarkdown={{this.displaySideBySideMarkdown}}
-      @viewMode={{this.viewMode}}
-    />
-    <Modal::History::Revisions
-      @model={{this.postRevision}}
-      @hiddenClasses={{this.hiddenClasses}}
-      @mobileView={{this.site.mobileView}}
-      @userChanges={{this.user_changes}}
-      @wikiDisabled={{this.wikiDisabled}}
-      @postTypeDisabled={{this.postTypeDisabled}}
-      @previousCategory={{this.previousCategory}}
-      @currentCategory={{this.currentCategory}}
-      @previousTagChanges={{this.previousTagChanges}}
-      @currentTagChanges={{this.currentTagChanges}}
-      @bodyDiffHTML={{this.bodyDiffHTML}}
-      @bodyDiff={{this.bodyDiff}}
-      @calculateBodyDiff={{this.calculateBodyDiff}}
-      @titleDiff={{this.titleDiff}}
-    />
+    <ConditionalLoadingSpinner @condition={{this.loading}}>
+      <Modal::History::Revision
+        @model={{this.postRevision}}
+        @mobileView={{this.site.mobileView}}
+        @wikiDisabled={{this.wikiDisabled}}
+        @previousCategory={{this.previousCategory}}
+        @currentCategory={{this.currentCategory}}
+        @displayInline={{this.displayInline}}
+        @displaySideBySide={{this.displaySideBySide}}
+        @displaySideBySideMarkdown={{this.displaySideBySideMarkdown}}
+        @viewMode={{this.viewMode}}
+      />
+      <Modal::History::Revisions
+        @model={{this.postRevision}}
+        @hiddenClasses={{this.hiddenClasses}}
+        @mobileView={{this.site.mobileView}}
+        @userChanges={{this.user_changes}}
+        @wikiDisabled={{this.wikiDisabled}}
+        @postTypeDisabled={{this.postTypeDisabled}}
+        @previousCategory={{this.previousCategory}}
+        @currentCategory={{this.currentCategory}}
+        @previousTagChanges={{this.previousTagChanges}}
+        @currentTagChanges={{this.currentTagChanges}}
+        @bodyDiffHTML={{this.bodyDiffHTML}}
+        @bodyDiff={{this.bodyDiff}}
+        @calculateBodyDiff={{this.calculateBodyDiff}}
+        @titleDiff={{this.titleDiff}}
+      />
+    </ConditionalLoadingSpinner>
   </:body>
   <:footer>
     {{#if @model.editPost}}
diff --git a/app/assets/javascripts/discourse/app/components/modal/history.js b/app/assets/javascripts/discourse/app/components/modal/history.js
index 4bfe4a30172..01c534153b3 100644
--- a/app/assets/javascripts/discourse/app/components/modal/history.js
+++ b/app/assets/javascripts/discourse/app/components/modal/history.js
@@ -168,8 +168,8 @@ export default class History extends Component {
   refresh(postId, postVersion) {
     this.loading = true;
     Post.loadRevision(postId, postVersion).then((result) => {
-      this.loading = false;
       this.postRevision = result;
+      this.loading = false;
     });
   }
 
diff --git a/app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs b/app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs
index 9d614d76cc3..eeedf274618 100644
--- a/app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs
@@ -68,6 +68,7 @@
 
   <LinksRedirect
     @class="row body-diff"
+    {{did-insert @calculateBodyDiff @bodyDiffHTML}}
     {{did-update @calculateBodyDiff @bodyDiffHTML}}
   >
     {{html-safe @bodyDiff}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/edit-notification-click-test.js b/app/assets/javascripts/discourse/tests/acceptance/edit-notification-click-test.js
index dacffb85cdb..2997c83ddee 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/edit-notification-click-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/edit-notification-click-test.js
@@ -42,7 +42,6 @@ acceptance("Edit Notification Click", function (needs) {
     await visit("/");
     await click(".header-dropdown-toggle.current-user");
     await click(".notification.edited a");
-
     const [v1, v2] = queryAll(".history-modal .revision-content");
 
     assert.strictEqual(