From 6db9f65e0ff4272db5d9c470de317e055224285c Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 29 Jun 2019 16:59:50 -0700
Subject: [PATCH] Hide spinner when connected to websocket

---
 .../scripts/components/server/Console.tsx     |  7 ++++--
 .../components/server/ServerConsole.tsx       | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/resources/scripts/components/server/Console.tsx b/resources/scripts/components/server/Console.tsx
index f30d35a6..0eca83d1 100644
--- a/resources/scripts/components/server/Console.tsx
+++ b/resources/scripts/components/server/Console.tsx
@@ -2,6 +2,8 @@ import React, { createRef, useEffect, useRef } from 'react';
 import { Terminal } from 'xterm';
 import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { State, useStoreState } from 'easy-peasy';
+import { ApplicationState } from '@/state/types';
 
 const theme = {
     background: 'transparent',
@@ -25,8 +27,9 @@ const theme = {
 };
 
 export default () => {
-    const ref = createRef<HTMLDivElement>();
+    const connected = useStoreState((state: State<ApplicationState>) => state.server.socket.connected);
 
+    const ref = createRef<HTMLDivElement>();
     const terminal = useRef(new Terminal({
         disableStdin: true,
         cursorStyle: 'underline',
@@ -50,7 +53,7 @@ export default () => {
 
     return (
         <div className={'text-xs font-mono relative'}>
-            <SpinnerOverlay visible={true} large={true}/>
+            <SpinnerOverlay visible={!connected} large={true}/>
             <div
                 className={'rounded-t p-2 bg-black overflow-scroll w-full'}
                 style={{
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index 50ccf851..0264e0d6 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import Console from '@/components/server/Console';
+import { State, useStoreState } from 'easy-peasy';
+import { ApplicationState } from '@/state/types';
 
-export default () => (
-    <div className={'my-10 flex'}>
-        <div className={'mx-4 w-3/4 mr-4'}>
-            <Console/>
+export default () => {
+    const status = useStoreState((state: State<ApplicationState>) => state.server.status);
+
+    return (
+        <div className={'my-10 flex'}>
+            <div className={'mx-4 w-3/4 mr-4'}>
+                <Console/>
+            </div>
+            <div className={'flex-1 ml-4'}>
+                <p>Current status: {status}</p>
+            </div>
         </div>
-        <div className={'flex-1 ml-4'}>
-            <p>Testing</p>
-        </div>
-    </div>
-);
+    );
+};