Add a loading state to the Run Editor

LiveSplit · May 12, 2020 · 43afac9 · 43afac9
1 parent 04aef1e
commit 43afac9
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 18 deletions.
diff --git a/src/css/Loading.scss 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;