apply loading backdrop when loading livestreams

frontend/src/components/LoadingBackdrop.tsx

@@ -1,10 +1,10 @@
 import { Backdrop, CircularProgress } from '@mui/material'
-import { useRecoilValue } from 'recoil'
-import { loadingAtom } from '../atoms/ui'
 
-const LoadingBackdrop: React.FC = () => {
+type Props = {
-  const isLoading = useRecoilValue(loadingAtom)
+  isLoading: boolean
+}
 
+const LoadingBackdrop: React.FC<Props> = ({ isLoading }) => {
   return (
     <Backdrop
       sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}

frontend/src/views/Home.tsx

@@ -1,15 +1,19 @@
 import {
   Container
 } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { loadingAtom } from '../atoms/ui'
 import Downloads from '../components/Downloads'
 import HomeActions from '../components/HomeActions'
 import LoadingBackdrop from '../components/LoadingBackdrop'
 import Splash from '../components/Splash'
 
 export default function Home() {
+  const isLoading = useRecoilValue(loadingAtom)
+
   return (
     <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>
-      <LoadingBackdrop />
+      <LoadingBackdrop isLoading={isLoading} />
       <Splash />
       <Downloads />
       <HomeActions />

frontend/src/views/Livestream.tsx

@@ -11,6 +11,7 @@ import { interval } from 'rxjs'
 import LivestreamDialog from '../components/livestream/LivestreamDialog'
 import LivestreamSpeedDial from '../components/livestream/LivestreamSpeedDial'
 import NoLivestreams from '../components/livestream/NoLivestreams'
+import LoadingBackdrop from '../components/LoadingBackdrop'
 import { useSubscription } from '../hooks/observable'
 import { useRPC } from '../hooks/useRPC'
 import { LiveStreamProgress, LiveStreamStatus } from '../types'
@@ -65,6 +66,8 @@ const LiveStreamMonitorView: React.FC = () => {
 
   return (
     <>
+      <LoadingBackdrop isLoading={!progress} />
+
       <LivestreamSpeedDial onOpen={() => setOpenDialog(s => !s)} onStopAll={stopAll} />
       <LivestreamDialog open={openDialog} onClose={() => setOpenDialog(s => !s)} />