feat(project): config loading state and add screens

src/App.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import Root from './components/Root/Root';
-import ConfigProvider from './providers/configProvider';
+import ConfigProvider from './providers/ConfigProvider';
 import QueryProvider from './providers/QueryProvider';
 import UIStateProvider from './providers/uiStateProvider';
 import './styles/main.scss';

src/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import ButtonLink from '../ButtonLink/ButtonLink';
 import Header from '../Header/Header';
 import SideBar from '../SideBar/SideBar';
 import DynamicBlur from '../DynamicBlur/DynamicBlur';
-import { ConfigContext } from '../../providers/configProvider';
+import { ConfigContext } from '../../providers/ConfigProvider';
 import { UIStateContext } from '../../providers/uiStateProvider';
 
 import styles from './Layout.module.scss';

src/components/LoadingOverlay/LoadingOverlay.module.scss

@@ -0,0 +1,56 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.loadingOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: variables.$loading-z-index;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+
+  background-color: var(--body-background-color);
+}
+
+.buffer {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+
+.buffer div {
+  position: absolute;
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 4px solid #fff;
+  border-color: #fff transparent transparent transparent;
+  border-radius: 50%;
+  animation: buffer 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.buffer div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.buffer div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.buffer div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes buffer {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/LoadingOverlay/LoadingOverlay.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './LoadingOverlay.module.scss';
+
+const LoadingOverlay: React.FC = () => {
+  return (
+    <div className={styles.loadingOverlay}>
+      <div className={styles.buffer}>
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+};
+
+export default LoadingOverlay;

src/components/Root/Root.tsx

@@ -2,8 +2,11 @@ import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import Layout from '../Layout/Layout';
-import Playlist from '../../screens/Playlist/Playlist';
 import Home from '../../screens/Home/Home';
+import Playlist from '../../screens/Playlist/Playlist';
+import Settings from '../../screens/Settings/Settings';
+import Video from '../../screens/Video/Video';
+import Series from '../../screens/Series/Series';
 
 type Props = {
   error?: Error | null;
@@ -19,7 +22,9 @@ const Root: FC<Props> = ({ error }: Props) => {
       <Switch>
         <Route path="/" component={Home} exact />
         <Route path="/p/:id" component={Playlist} exact />
-        <Route path="/u" component={() => <span>Settings</span>} exact />
+        <Route path="/u" component={Settings} exact />
+        <Route path="/m/:id/:slug" component={Video} exact />
+        <Route path="/s/:seriesId/:seriesSlug/:episodeId/:episodeSlug" component={Series} exact />
       </Switch>
     </Layout>
   );

src/providers/configProvider.tsx

@@ -3,6 +3,7 @@ import merge from 'lodash.merge';
 
 import loadConfig, { validateConfig } from '../services/config.service';
 import type { Config, Options } from '../../types/Config';
+import LoadingOverlay from '../components/LoadingOverlay/LoadingOverlay';
 
 const defaultConfig: Config = {
   id: '',
@@ -34,20 +35,24 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
   onValidationError,
 }) => {
   const [config, setConfig] = useState<Config>(defaultConfig);
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const loadAndValidateConfig = async (configLocation: string) => {
       onLoading(true);
+      setLoading(true);
       const config = await loadConfig(configLocation);
       validateConfig(config)
         .then((configValidated) => {
           setConfig(() => merge({}, defaultConfig, configValidated));
           setCssVariables(configValidated.options);
           onLoading(false);
+          setLoading(false);
         })
         .catch((error: Error) => {
           onValidationError(error);
           onLoading(false);
+          setLoading(false);
         });
     };
     loadAndValidateConfig(configLocation);
@@ -65,7 +70,12 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     }
   };
 
-  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
+  return (
+    <ConfigContext.Provider value={config}>
+      {loading ? <LoadingOverlay /> : null}
+      {children}
+    </ConfigContext.Provider>
+  );
 };
 
 export default ConfigProvider;

src/screens/Home/Home.tsx

@@ -9,7 +9,7 @@ import type { PlaylistItem } from 'types/playlist';
 import { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
 import { UIStateContext, UpdateBlurImage } from '../../providers/uiStateProvider';
 import Shelf from '../../container/Shelf/Shelf';
-import { ConfigContext } from '../../providers/configProvider';
+import { ConfigContext } from '../../providers/ConfigProvider';
 import type { UsePlaylistResult } from '../../hooks/usePlaylist';
 import usePlaylist from '../../hooks/usePlaylist';
 import useBreakpoint from '../../hooks/useBreakpoint';

src/screens/Series/Series.module.scss

@@ -0,0 +1,2 @@
+@use '../../styles/variables';
+@use '../../styles/theme';

src/screens/Series/Series.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Series from './Series';
+
+describe('<Series>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Series />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/screens/Series/Series.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './Series.module.scss';
+
+type Props = {
+  prop?: string;
+};
+
+const Series: React.FC<Props> = ({ prop }: Props) => {
+  return (
+    <div className={styles.Series}>
+      <p>{prop}</p>
+    </div>
+  );
+};
+
+export default Series;

src/screens/Series/__snapshots__/Series.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Series> renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <p />
+  </div>
+</div>
+`;

src/screens/Settings/Settings.module.scss

@@ -0,0 +1,2 @@
+@use '../../styles/variables';
+@use '../../styles/theme';

src/screens/Settings/Settings.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Settings from './Settings';
+
+describe('<Settings>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Settings />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/screens/Settings/Settings.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './Settings.module.scss';
+
+type Props = {
+  prop?: string;
+};
+
+const Settings: React.FC<Props> = ({ prop }: Props) => {
+  return (
+    <div className={styles.Settings}>
+      <p>{prop}</p>
+    </div>
+  );
+};
+
+export default Settings;

src/screens/Settings/__snapshots__/Settings.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Settings> renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <p />
+  </div>
+</div>
+`;

src/screens/Video/Video.module.scss

@@ -0,0 +1,2 @@
+@use '../../styles/variables';
+@use '../../styles/theme';

src/screens/Video/Video.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Video from './Video';
+
+describe('<Video>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Video />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/screens/Video/Video.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './Video.module.scss';
+
+type Props = {
+  prop?: string;
+};
+
+const Video: React.FC<Props> = ({ prop }: Props) => {
+  return (
+    <div className={styles.Video}>
+      <p>{prop}</p>
+    </div>
+  );
+};
+
+export default Video;

src/screens/Video/__snapshots__/Video.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Video> renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <p />
+  </div>
+</div>
+`;