Hide spinner when connected to websocket

This commit is contained in:
Dane Everitt 2019-06-29 16:59:50 -07:00
parent c8d89e0964
commit 6db9f65e0f
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 20 additions and 11 deletions

View File

@ -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={{

View File

@ -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>
);
);
};