refactor(frontend/release): add a loading circle for release player when fetching episodes data

frontend/app/components/Release/ReleaseInfo.jsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getData } from "@/app/api/api-utils";
+import { endpoints } from "@/app/api/config";
+
+export const ReleaseInfo = (props) => {
+  const [releaseInfo, setReleaseInfo] = useState();
+
+  useEffect(() => {
+    async function _fetchInfo() {
+      const release = await getData(`${endpoints.release}/${props.id}`);
+      setReleaseInfo(release);
+    }
+    if (props.id) {
+      _fetchInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <article class="no-padding">
+      <div class="grid no-space">
+        <div class="s6">
+          <img class="responsive" src={releaseInfo.release.image} />
+        </div>
+        <div class="s6">
+          <div class="padding">
+            <h5>Title</h5>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <nav>
+              <button class="border round">Button</button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};

frontend/app/components/Release/ReleasePlayer.jsx

@@ -77,6 +77,8 @@ export const ReleasePlayer = (props) => {
   }, [selectedEpisode]);
 
   return (
+    <>
+      {voiceoverInfo && sourcesInfo && episodeInfo ? (
         <article className="fill grid">
           <iframe
             src={episodeURL}
@@ -159,5 +161,11 @@ export const ReleasePlayer = (props) => {
               })}
           </nav>
         </article>
+      ) : (
+        <div className="center-align">
+          <progress className="circle" />
+        </div>
+      )}
+    </>
   );
 };

frontend/app/release/[id]/page.js

@@ -1,51 +1,11 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { getData } from "@/app/api/api-utils";
-import { endpoints } from "@/app/api/config";
-import { useUserStore } from "@/app/store/user-store";
-import { useSettingsStore } from "@/app/store/settings-store";
-
 import { ReleasePlayer } from "@/app/components/Release/ReleasePlayer";
+import { ReleaseInfo } from "@/app/components/Release/ReleaseInfo";
 
 export default function Release(props) {
-  const userStore = useUserStore();
-  const settingsStore = useSettingsStore();
-  const [releaseInfo, setReleaseInfo] = useState();
-
-  useEffect(() => {
-    async function _fetchInfo() {
-      const release = await getData(`${endpoints.release}/${props.id}`);
-      setReleaseInfo(release);
-    }
-    if (props.params.id) {
-      _fetchInfo();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <>
-      {/* <article class="no-padding">
-        <div class="grid no-space">
-          <div class="s6">
-            <img class="responsive" src={releaseInfo.release.image} />
-          </div>
-          <div class="s6">
-            <div class="padding">
-              <h5>Title</h5>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <nav>
-                <button class="border round">Button</button>
-              </nav>
-            </div>
-          </div>
-        </div>
-      </article> */}
-
       <ReleasePlayer id={props.params.id} />
     </>
   );