+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { Grid, CircularProgress } from '@material-ui/core';
+
+type CssRules = 'root' | 'img';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ img: {
+ marginBottom: theme.spacing.unit * 4
+ },
+ root: {
+ background: theme.palette.background.default,
+ bottom: 0,
+ left: 0,
+ position: 'fixed',
+ right: 0,
+ top: 0,
+ zIndex: theme.zIndex.appBar + 1,
+ }
+});
+
+export const WorkbenchLoadingScreen = withStyles(styles)(({ classes }: WithStyles<CssRules>) =>
+ <Grid container direction="column" alignItems='center' justify='center' className={classes.root}>
+ <img src='https://arvados.org/images/img01.png' className={classes.img} />
+ <CircularProgress />
+ </Grid>
+);