btc: improved initial loading display

pkg/btc-wallet/src/js/components/root.js

@@ -7,7 +7,13 @@ import { store } from '../store.js';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import light from './themes/light';
 import dark from './themes/dark';
-import { Text, Box } from '@tlon/indigo-react';
+import {
+  Text,
+  Box,
+  Reset,
+  Col,
+  LoadingSpinner,
+} from '@tlon/indigo-react';
 import StartupModal from './lib/startupModal.js';
 import Header from './lib/header.js'
 import Balance from './lib/balance.js'
@@ -32,29 +38,43 @@ export class Root extends Component {
   }
 
   render() {
+    const loaded = this.state.loaded;;
+
     return (
       <BrowserRouter>
         <ThemeProvider theme={light}>
-        <StartupModal api={api} state={this.state}/>
-        <Box display='flex'
+        <Reset/>
+        { (loaded) ? <StartupModal api={api} state={this.state}/> : null }
+        <Box display="flex"
           flexDirection='column'
           position='absolute'
           alignItems='center'
           backgroundColor='lightOrange'
           width='100%'
+          minHeight={loaded ? '100%' : 'none'}
+          height={loaded ? 'none' : '100%'}
           px={[0,4]}
           pb={[0,4]}
         >
-          <Box
-           display='flex'
-           flexDirection='column'
-           height='100%'
-           width='400px'
-          >
-            <Header />
-            <Balance api={api} state={this.state}/>
-            <Transactions state={this.state}/>
-          </Box>
+          { (loaded) ?
+              <Col
+               display='flex'
+               flexDirection='column'
+               width='400px'
+              >
+                <Header />
+                <Balance api={api} state={this.state}/>
+                <Transactions state={this.state}/>
+              </Col>
+            :  <Box display="flex" width="100%" height="100%" alignItems="center" justifyContent="center">
+                 <LoadingSpinner
+                   width={7}
+                   height={7}
+                   background="midOrange"
+                   foreground="orange"
+                 />
+               </Box>
+          }
         </Box>
         </ThemeProvider>
       </BrowserRouter>

pkg/btc-wallet/src/js/reducers/initial.js

@@ -10,6 +10,7 @@ export class InitialReducer {
       state.btcState = data['btc-state'];
       state.history = this.reduceHistory(data.history);
       state.address = data.address
+      state.loaded = true;
     }
   }
 

pkg/btc-wallet/src/js/store.js

@@ -5,6 +5,7 @@ import { CurrencyReducer } from './reducers/currency';
 class Store {
   constructor() {
     this.state = {
+      loaded: false,
       providerPerms: {},
       shipWallets: {},
       provider: null,