From 43afac95416a6e6b37ba636d1f21bcddd1593672 Mon Sep 17 00:00:00 2001
From: wooferzfg <spapushin@gmail.com>
Date: Mon, 11 May 2020 21:52:54 -0500
Subject: [PATCH] Add a loading state to the Run Editor

---
 src/css/Loading.scss         | 14 ++++++++++++++
 src/css/RunEditor.scss       | 14 ++++++++------
 src/css/Splits.scss          |  2 +-
 src/css/SplitsSelection.scss | 12 ++----------
 src/css/Title.scss           |  2 +-
 src/ui/RunEditor.tsx         | 13 +++++++++++++
 6 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 src/css/Loading.scss

diff --git a/src/css/Loading.scss b/src/css/Loading.scss
new file mode 100644
index 000000000..e879a5d8b
--- /dev/null
+++ b/src/css/Loading.scss
@@ -0,0 +1,14 @@
+
+$loading-text-font-size: 40px;
+
+@mixin loading {
+  .loading {
+    display: flex;
+    width: fit-content;
+    font-size: $loading-text-font-size;
+  
+    .loading-text {
+      margin-left: $ui-margin;
+    }
+  }
+}
diff --git a/src/css/RunEditor.scss b/src/css/RunEditor.scss
index 3067cc695..e42cd9274 100644
--- a/src/css/RunEditor.scss
+++ b/src/css/RunEditor.scss
@@ -1,9 +1,10 @@
-@import "ContextMenu";
-@import "Markdown";
-@import "mobile";
-@import "Table";
-@import "Toggle";
-@import "variables";
+@import 'mobile';
+@import 'variables';
+@import 'ContextMenu';
+@import 'Loading';
+@import 'Markdown';
+@import 'Table';
+@import 'Toggle';
 
 $tab-bar-height: 30px + $ui-margin / 2;
 $tab-width: 625px;
@@ -17,6 +18,7 @@ $small-button-padding: 1px 3px 1px 3px;
 
 .run-editor {
   @include context-menu;
+  @include loading;
   @include markdown;
   @include table;
   @include toggle;
diff --git a/src/css/Splits.scss b/src/css/Splits.scss
index 251fd77bb..facd0d5be 100644
--- a/src/css/Splits.scss
+++ b/src/css/Splits.scss
@@ -1,4 +1,4 @@
-@import "Time";
+@import 'Time';
 @import 'variables';
 
 $split-column-width: $default-line-height * 3;
diff --git a/src/css/SplitsSelection.scss b/src/css/SplitsSelection.scss
index d554c71c3..18daa34b2 100644
--- a/src/css/SplitsSelection.scss
+++ b/src/css/SplitsSelection.scss
@@ -1,22 +1,14 @@
 @import 'mobile';
 @import 'variables';
+@import 'Loading';
 @import 'Table';
 @import 'ContextMenu';
 
-$loading-text-font-size: 40px;
 $splits-row-width: 500px;
 $splits-row-height: 40px;
 
 .splits-selection {
-  .loading {
-    display: flex;
-    width: fit-content;
-    font-size: $loading-text-font-size;
-
-    .loading-text {
-      margin-left: $ui-margin;
-    }
-  }
+  @include loading;
 
   .splits-selection-container {
     display: flex;
diff --git a/src/css/Title.scss b/src/css/Title.scss
index 40eefd252..ebade86e3 100644
--- a/src/css/Title.scss
+++ b/src/css/Title.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 $game-icon-size: $two-row-height - $vertical-padding * 2;
 
diff --git a/src/ui/RunEditor.tsx b/src/ui/RunEditor.tsx
index a03e22048..e2a79f84a 100644
--- a/src/ui/RunEditor.tsx
+++ b/src/ui/RunEditor.tsx
@@ -28,6 +28,7 @@ export interface Props {
 }
 export interface State {
     editor: LiveSplit.RunEditorStateJson,
+    isLoading: boolean,
     offsetIsValid: boolean,
     attemptCountIsValid: boolean,
     rowState: RowState,
@@ -81,6 +82,7 @@ export class RunEditor extends React.Component<Props, State> {
         this.state = {
             attemptCountIsValid: true,
             editor: state,
+            isLoading: false,
             offsetIsValid: true,
             rowState: {
                 bestSegmentTime: "",
@@ -117,6 +119,17 @@ export class RunEditor extends React.Component<Props, State> {
     }
 
     private renderView() {
+        if (this.state.isLoading) {
+            return (
+                <div className="run-editor">
+                    <div className="loading">
+                        <div className="fa fa-spinner fa-spin"></div>
+                        <div className="loading-text">Loading...</div>
+                    </div>
+                </div>
+            );
+        }
+
         const gameIcon = this.getGameIcon();
 
         let gameIconContextTrigger: any = null;