Add video embed loading state

web/pages/embed/video/index.tsx

@@ -1,21 +1,26 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { useRouter } from 'next/router';
+import { Skeleton } from 'antd';
 import {
   clientConfigStateAtom,
   ClientConfigStore,
   isOnlineSelector,
   serverStatusState,
+  appStateAtom,
 } from '../../../components/stores/ClientConfigStore';
 import { OfflineBanner } from '../../../components/ui/OfflineBanner/OfflineBanner';
 import { Statusbar } from '../../../components/ui/Statusbar/Statusbar';
 import { OwncastPlayer } from '../../../components/video/OwncastPlayer/OwncastPlayer';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import { ServerStatus } from '../../../interfaces/server-status.model';
+import { AppStateOptions } from '../../../components/stores/application-state';
+import { Theme } from '../../../components/theme/Theme';
 
 export default function VideoEmbed() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+  const appState = useRecoilValue<AppStateOptions>(appStateAtom);
 
   const { name } = clientConfig;
 
@@ -39,34 +44,45 @@ export default function VideoEmbed() {
 
   const initiallyMuted = query.initiallyMuted === 'true';
 
+  const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />;
+
+  const offlineState = (
+    <OfflineBanner streamName={name} customText={offlineMessage} notificationsEnabled={false} />
+  );
+
+  const onlineState = (
+    <>
+      <OwncastPlayer
+        source="/hls/stream.m3u8"
+        online={online}
+        initiallyMuted={initiallyMuted}
+        title={streamTitle || name}
+      />
+      <Statusbar
+        online={online}
+        lastConnectTime={lastConnectTime}
+        lastDisconnectTime={lastDisconnectTime}
+        viewerCount={viewerCount}
+      />
+    </>
+  );
+
+  const getView = () => {
+    if (appState.appLoading) {
+      return loadingState;
+    }
+    if (online) {
+      return onlineState;
+    }
+
+    return offlineState;
+  };
+
   return (
     <>
       <ClientConfigStore />
-      <div className="video-embed">
+      <Theme />
-        {online && (
+      <div className="video-embed">{getView()}</div>
-          <OwncastPlayer
-            source="/hls/stream.m3u8"
-            online={online}
-            initiallyMuted={initiallyMuted}
-            title={streamTitle || name}
-          />
-        )}
-        {!online && (
-          <OfflineBanner
-            streamName={name}
-            customText={offlineMessage}
-            notificationsEnabled={false}
-          />
-        )}
-        {online && (
-          <Statusbar
-            online={online}
-            lastConnectTime={lastConnectTime}
-            lastDisconnectTime={lastDisconnectTime}
-            viewerCount={viewerCount}
-          />
-        )}
-      </div>
     </>
   );
 }