feat: added loader to production-line-view

Eyevinn · Apr 9, 2024 · 9772ee6 · 9772ee6
1 parent 8633f0e
commit 9772ee6
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -10,6 +10,7 @@ import { useAudioElement } from "./use-audio-element.ts";
 import { UserList } from "./user-list.tsx";
 import { API } from "../../api/api.ts";
 import { noop } from "../../helpers.ts";
+import { Loader } from "../loader/loader.tsx";
 
 const TempDiv = styled.div`
   padding: 1rem;
@@ -22,6 +23,7 @@ export const ProductionLine: FC = () => {
   const [participants, setParticipants] = useState<
     { name: string; sessionid: string }[] | null
   >(null);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const { playbackState, audioElement } = useAudioElement({
     audioContainerRef,
@@ -68,7 +70,12 @@ export const ProductionLine: FC = () => {
     }
   }, [navigate, joinProductionOptions]);
 
-  // TODO pretty spinner component
+  useEffect(() => {
+    setLoading(true);
+    if (connectionState === "connected") {
+      setLoading(false);
+    }
+  }, [connectionState]);
 
   // TODO if (!input !output !username) return <JoinProductionForm />
 
@@ -84,21 +91,27 @@ export const ProductionLine: FC = () => {
   // Mute/Unmute speaker
   // Show active sink and mic
   // Exit button (link to /, clear production from state)
+
   return (
     <div>
       <TempDiv>
         <ActionButton onClick={exit}>Exit</ActionButton>
       </TempDiv>
-      <TempDiv>Production View</TempDiv>
-      <TempDiv ref={audioContainerRef} />
-      {playbackState && (
-        <TempDiv>Audio Playback State: {playbackState}</TempDiv>
+      {loading && <Loader className="join-production" />}
+      {!loading && (
+        <>
+          <TempDiv>Production View</TempDiv>
+          <TempDiv ref={audioContainerRef} />
+          {playbackState && (
+            <TempDiv>Audio Playback State: {playbackState}</TempDiv>
+          )}
+          {connectionState && (
+            <TempDiv>RTC Connection State: {connectionState}</TempDiv>
+          )}
+
+          <UserList participants={participants} />
+        </>
       )}
-      {connectionState && (
-        <TempDiv>RTC Connection State: {connectionState}</TempDiv>
-      )}
-
-      <UserList participants={participants} />
     </div>
   );
 };