Fix style showing spinner and empty table while it is fetching token's info

src/components/Table/index.jsx

@@ -1,11 +1,14 @@
 // @flow
 import * as React from 'react'
+import classNames from 'classnames'
 import { List } from 'immutable'
+import Row from '~/components/layout/Row'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import { withStyles } from '@material-ui/core/styles'
+import CircularProgress from '@material-ui/core/CircularProgress'
 import TablePagination from '@material-ui/core/TablePagination'
 import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
 import TableHead, { type Column } from '~/components/Table/TableHead'
@@ -48,8 +51,10 @@ const styles = {
     boxShadow: '0 2px 4px 0 rgba(74, 85, 121, 0.5)',
     marginBottom: xl,
   },
-  empty: {
-
+  loader: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
   },
 }
 
@@ -78,6 +83,10 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
     }))
   }
 
+  getEmptyStyle = (emptyRows: number) => ({
+    height: FIXED_HEIGHT * emptyRows,
+  })
+
   handleChangePage = (e: SyntheticInputEvent<HTMLInputElement>, page: number) => {
     this.setState({ page })
   }
@@ -114,12 +123,11 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
       .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
 
     const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage))
-    const emptyStyle = {
-      height: FIXED_HEIGHT * emptyRows,
-    }
+    const isEmpty = size === 0
 
     return (
       <React.Fragment>
+        { !isEmpty &&
           <Table aria-labelledby={label} className={classes.root}>
             <TableHead
               columns={columns}
@@ -130,12 +138,18 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
             <TableBody>
               { children(sortedData) }
               { emptyRows > 0 &&
-              <TableRow style={emptyStyle}>
+                <TableRow style={this.getEmptyStyle(emptyRows)}>
                   <TableCell colSpan={4} />
                 </TableRow>
               }
             </TableBody>
           </Table>
+        }
+        { isEmpty &&
+          <Row className={classNames(classes.loader, classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
+            <CircularProgress size={60} />
+          </Row>
+        }
         <TablePagination
           component="div"
           count={size}