From be968d9158f65b41bf11444b140c502249c07ed0 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Mon, 15 Aug 2022 08:47:33 -0700
Subject: [PATCH] DEV: Add loading spinner (#20)

* WIP: Add loading spinner

* DEV: Linting fixes

* DEV: Make `loading` a `@tracked` property
---
 .../discourse/components/spreadsheet-editor.js       | 10 +++++++---
 .../templates/components/spreadsheet-editor.hbs      | 12 +++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/javascripts/discourse/components/spreadsheet-editor.js b/javascripts/discourse/components/spreadsheet-editor.js
index 9a35ec8..326917c 100644
--- a/javascripts/discourse/components/spreadsheet-editor.js
+++ b/javascripts/discourse/components/spreadsheet-editor.js
@@ -16,6 +16,7 @@ export default class SpreadsheetEditor extends Component {
   @tracked showEditReason = false;
   spreadsheet = null;
   defaultColWidth = 150;
+  @tracked loading = null;
 
   // Getters:
   get isEditingTable() {
@@ -92,9 +93,12 @@ export default class SpreadsheetEditor extends Component {
 
   // Helper Methods:
   loadLibraries() {
-    return loadScript(settings.theme_uploads_local.jsuites).then(() => {
-      return loadScript(settings.theme_uploads_local.jspreadsheet);
-    });
+    this.loading = true;
+    return loadScript(settings.theme_uploads_local.jsuites)
+      .then(() => {
+        return loadScript(settings.theme_uploads_local.jspreadsheet);
+      })
+      .finally(() => (this.loading = false));
   }
 
   buildNewTable() {
diff --git a/javascripts/discourse/templates/components/spreadsheet-editor.hbs b/javascripts/discourse/templates/components/spreadsheet-editor.hbs
index b748e0b..044197a 100644
--- a/javascripts/discourse/templates/components/spreadsheet-editor.hbs
+++ b/javascripts/discourse/templates/components/spreadsheet-editor.hbs
@@ -20,11 +20,13 @@
     </div>
   {{/if}}
 
-  <div
-    {{did-insert this.createSpreadsheet}}
-    tabindex="1"
-    class="jexcel_container"
-  ></div>
+  <ConditionalLoadingSpinner @condition={{this.loading}}>
+    <div
+      {{did-insert this.createSpreadsheet}}
+      tabindex="1"
+      class="jexcel_container"
+    ></div>
+  </ConditionalLoadingSpinner>
 </DModalBody>
 
 <div class="modal-footer">