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>
+  );
+};