sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/scripts/components/server/Console.tsx
View File

@ -2,6 +2,8 @@ import React, { createRef, useEffect, useRef } from 'react';
import { Terminal } from 'xterm'; import { Terminal } from 'xterm';
import * as TerminalFit from 'xterm/lib/addons/fit/fit'; import * as TerminalFit from 'xterm/lib/addons/fit/fit';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { State, useStoreState } from 'easy-peasy';
import { ApplicationState } from '@/state/types';
const theme = { const theme = {
background: 'transparent', background: 'transparent',
@ -25,8 +27,9 @@ const theme = {
}; };
export default () => { 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({ const terminal = useRef(new Terminal({
disableStdin: true, disableStdin: true,
cursorStyle: 'underline', cursorStyle: 'underline',
@ -50,7 +53,7 @@ export default () => {
return ( return (
<div className={'text-xs font-mono relative'}> <div className={'text-xs font-mono relative'}>
<SpinnerOverlay visible={true} large={true}/> <SpinnerOverlay visible={!connected} large={true}/>
<div <div
className={'rounded-t p-2 bg-black overflow-scroll w-full'} className={'rounded-t p-2 bg-black overflow-scroll w-full'}
style={{ style={{

24
resources/scripts/components/server/ServerConsole.tsx
View File

@ -1,13 +1,19 @@
import React from 'react'; import React from 'react';
import Console from '@/components/server/Console'; import Console from '@/components/server/Console';
import { State, useStoreState } from 'easy-peasy';
import { ApplicationState } from '@/state/types';
export default () => ( export default () => {
<div className={'my-10 flex'}> const status = useStoreState((state: State<ApplicationState>) => state.server.status);
<div className={'mx-4 w-3/4 mr-4'}>
<Console/> 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>
<div className={'flex-1 ml-4'}> );
<p>Testing</p> };
</div>
</div>
);