diff options
author | Determinant <ted.sybil@gmail.com> | 2019-02-17 00:47:47 -0500 |
---|---|---|
committer | Determinant <ted.sybil@gmail.com> | 2019-02-17 00:47:47 -0500 |
commit | ea3cbbe3fab9ac6882d4d25c258cb175081c66d7 (patch) | |
tree | be6cd383fc29bcf63400d2e26a1d279430d6955e /src/popup.tsx | |
parent | 8bc7527072d9d42efd90ae6a4847648c11d48def (diff) |
improve popup loading
Diffstat (limited to 'src/popup.tsx')
-rw-r--r-- | src/popup.tsx | 18 |
1 files changed, 13 insertions, 5 deletions
diff --git a/src/popup.tsx b/src/popup.tsx index 20f08e0..0c0c8cc 100644 --- a/src/popup.tsx +++ b/src/popup.tsx @@ -1,12 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles'; +import { Theme, withStyles, StyleRules, MuiThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import RefreshIcon from '@material-ui/icons/Refresh'; import Divider from '@material-ui/core/Divider'; +import CircularProgress from '@material-ui/core/CircularProgress'; import Logo from './Logo'; import { theme } from './theme'; @@ -19,7 +20,7 @@ function openOptions() { chrome.tabs.create({ url: "index.html" }); } -const styles = (theme: Theme) => ({ +const styles = (theme: Theme): StyleRules => ({ content: { padding: theme.spacing.unit * 1, overflow: 'auto', @@ -32,13 +33,17 @@ const styles = (theme: Theme) => ({ buttonSpacer: { marginBottom: theme.spacing.unit * 2, }, + loading: { + textAlign: 'center' + } }); type PopupProps = { classes: { content: string, buttons: string, - buttonSpacer: string + buttonSpacer: string, + loading: string } }; @@ -92,6 +97,7 @@ class Popup extends React.Component<PopupProps> { </div> <div className={classes.buttonSpacer} /> { + (data.length > 0 && data.map((d, idx) => ( <div key={idx}> <Typography variant="subtitle1" align="center" color="textPrimary"> @@ -104,11 +110,13 @@ class Popup extends React.Component<PopupProps> { {(d.data.some(dd => dd.value > 1e-3) && <StyledPatternPieChart data={d.data} />) || <Typography variant="subtitle1" align="center" color="textSecondary"> - No data available + No matching events. </Typography>} {idx + 1 < data.length && <Divider />} </div> - )) + ))) || ( + <div className={classes.loading}><CircularProgress color="primary" /></div> + ) } </main> </MuiThemeProvider> |