add AppLoading, Spinner and a basic material-ui theme

.graphqlconfig

@@ -6,7 +6,7 @@
       "Default GraphQL Endpoint": {
         "url": "http://localhost:8080/graphql",
         "headers": {
-          "user-agent": "JS GraphQL"
+          "user-agent": "IDE"
         },
         "introspect": true
       }

src/common/Spinner/Spinner.tsx

@@ -0,0 +1,42 @@
+import {
+  Box,
+  Typography,
+  CircularProgress,
+  BoxProps,
+  TypographyProps,
+} from '@material-ui/core';
+
+export const CENTER_SPINNER: BoxProps = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+};
+
+export interface SpinnerProps {
+  size?: number;
+  containerProps?: BoxProps;
+  typographyProps?: TypographyProps;
+  description?: string;
+}
+
+function Spinner({
+  size = 150,
+  containerProps = CENTER_SPINNER,
+  typographyProps = { variant: 'h3' },
+  description = '',
+}: SpinnerProps) {
+  return (
+    <Box {...containerProps}>
+      <Box mb={description ? 1 : 0}>
+        <CircularProgress size={size} />
+      </Box>
+      {description && (
+        <Typography {...typographyProps}>{description}</Typography>
+      )}
+    </Box>
+  );
+}
+
+export default Spinner;

src/features/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import AppLoading from './AppLoading';
 
 function App() {
   return (

src/features/AppLoading.tsx

@@ -0,0 +1,26 @@
+import Spinner, { CENTER_SPINNER } from 'common/Spinner/Spinner';
+import { useAuth } from 'libs/auth';
+
+export interface AppLoadingProps {
+  children: JSX.Element;
+}
+
+function AppLoading({ children }: AppLoadingProps) {
+  const { loading } = useAuth();
+
+  if (loading) {
+    return (
+      <Spinner
+        containerProps={{
+          ...CENTER_SPINNER,
+          minHeight: '100vh',
+        }}
+        description="Wczytywanie danych..."
+      />
+    );
+  }
+
+  return children;
+}
+
+export default AppLoading;

src/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
-import { MuiThemeProvider } from '@material-ui/core';
 import { ApolloProvider } from '@apollo/client';
 import App from './features/App';
+import AppLoading from './features/AppLoading';
 import { AuthProvider } from './libs/auth';
+import ThemeProvider from './libs/material-ui/ThemeProvider';
 import TokenStorage from './libs/tokenstorage/TokenStorage';
 import createClient from './libs/graphql/createClient';
 import { API_URI } from './config/api';
@@ -15,9 +16,13 @@ const tokenStorage = new TokenStorage();
 ReactDOM.render(
   <BrowserRouter>
     <ApolloProvider client={createClient(API_URI, tokenStorage)}>
-      <AuthProvider tokenStorage={tokenStorage}>
-        <App />
-      </AuthProvider>
+      <ThemeProvider>
+        <AuthProvider tokenStorage={tokenStorage}>
+          <AppLoading>
+            <App />
+          </AppLoading>
+        </AuthProvider>
+      </ThemeProvider>
     </ApolloProvider>
   </BrowserRouter>,
   document.getElementById('root')

src/libs/material-ui/ThemeProvider.tsx

@@ -0,0 +1,18 @@
+import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
+import { CssBaseline } from '@material-ui/core';
+import createTheme from './createTheme';
+
+interface ThemeProviderProps {
+  children?: React.ReactNode;
+}
+
+function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <MuiThemeProvider theme={createTheme()}>
+      {children}
+      <CssBaseline />
+    </MuiThemeProvider>
+  );
+}
+
+export default ThemeProvider;

src/libs/material-ui/createTheme.ts

@@ -0,0 +1,21 @@
+import {
+  createMuiTheme,
+  responsiveFontSizes,
+  Theme,
+} from '@material-ui/core/styles';
+
+const createTheme = (): Theme => {
+  return responsiveFontSizes(
+    createMuiTheme({
+      overrides: {
+        MuiTableContainer: {
+          root: {
+            overflow: 'auto',
+          },
+        },
+      },
+    })
+  );
+};
+
+export default createTheme;