diff --git a/.graphqlconfig b/.graphqlconfig
index 7dff810..ddd96d5 100644
--- a/.graphqlconfig
+++ b/.graphqlconfig
@@ -6,7 +6,7 @@
"Default GraphQL Endpoint": {
"url": "http://localhost:8080/graphql",
"headers": {
- "user-agent": "JS GraphQL"
+ "user-agent": "IDE"
},
"introspect": true
}
diff --git a/src/common/Spinner/Spinner.tsx b/src/common/Spinner/Spinner.tsx
new file mode 100644
index 0000000..72208e9
--- /dev/null
+++ b/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 (
+
+
+
+
+ {description && (
+ {description}
+ )}
+
+ );
+}
+
+export default Spinner;
diff --git a/src/features/App.tsx b/src/features/App.tsx
index 9302b46..4dbe984 100644
--- a/src/features/App.tsx
+++ b/src/features/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import AppLoading from './AppLoading';
function App() {
return (
diff --git a/src/features/AppLoading.tsx b/src/features/AppLoading.tsx
new file mode 100644
index 0000000..a2322f5
--- /dev/null
+++ b/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 (
+
+ );
+ }
+
+ return children;
+}
+
+export default AppLoading;
diff --git a/src/index.tsx b/src/index.tsx
index 213d5a7..38e72f1 100644
--- a/src/index.tsx
+++ b/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(
-
-
-
+
+
+
+
+
+
+
,
document.getElementById('root')
diff --git a/src/libs/material-ui/ThemeProvider.tsx b/src/libs/material-ui/ThemeProvider.tsx
new file mode 100644
index 0000000..2698249
--- /dev/null
+++ b/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 (
+
+ {children}
+
+
+ );
+}
+
+export default ThemeProvider;
diff --git a/src/libs/material-ui/createTheme.ts b/src/libs/material-ui/createTheme.ts
new file mode 100644
index 0000000..102594b
--- /dev/null
+++ b/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;