src/views/workbench/workbench-loading-screen.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   7 import { ArvadosTheme } from 'common/custom-theme';
   8 import { Grid, CircularProgress } from '@material-ui/core';
   9
  10 type CssRules = 'root' | 'img';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     img: {
  14         marginBottom: theme.spacing.unit * 4
  15     },
  16     root: {
  17         background: theme.palette.background.default,
  18         bottom: 0,
  19         left: 0,
  20         position: 'fixed',
  21         right: 0,
  22         top: 0,
  23         zIndex: theme.zIndex.appBar + 1,
  24     }
  25 });
  26
  27 export const WorkbenchLoadingScreen = withStyles(styles)(({ classes }: WithStyles<CssRules>) =>
  28     <Grid container direction="column" alignItems='center' justify='center' className={classes.root}>
  29         <img src='/arvados_logo.png' alt='Arvados logo' className={classes.img} />
  30         <CircularProgress data-cy='loading-spinner' />
  31     </Grid>
  32 );