www: add transcripts list

www/app/browse/page.tsx

@@ -9,21 +9,35 @@ import {
 import { Title } from "../lib/textComponents";
 import Pagination from "./pagination";
 import Link from "next/link";
+import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 
 export default function TranscriptBrowser() {
   const api = getApi();
   const [results, setResults] = useState<PageGetTranscript | null>(null);
   const [page, setPage] = useState<number>(1);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const isAuthenticated = useFiefIsAuthenticated();
 
   useEffect(() => {
-    api.v1TranscriptsList({ page }).then((response) => {
+    if (!isAuthenticated) return;
+    setIsLoading(true);
+    api
+      .v1TranscriptsList({ page })
+      .then((response) => {
         // issue with API layer, conversion for items is not happening
         response.items = response.items.map((item) =>
           GetTranscriptFromJSON(item),
         );
         setResults(response);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setResults(null);
+        setIsLoading(false);
       });
-  }, [page]);
+  }, [page, isAuthenticated]);
 
   return (
     <div>
@@ -45,6 +59,18 @@ export default function TranscriptBrowser() {
 
       <div /** center and max 900px wide */ className="mx-auto max-w-[900px]">
         <div className="grid grid-cols-1 gap-2 lg:gap-4 h-full">
+          {isLoading ? (
+            <FontAwesomeIcon
+              icon={faGear}
+              className="animate-spin-slow h-14 w-14 md:h-20 md:w-20"
+            />
+          ) : (
+            <>
+              {results === null ? (
+                <div className="text-gray-500">No transcripts found.</div>
+              ) : (
+                <></>
+              )}
               {results?.items.map((item: GetTranscript) => (
                 <div
                   key={item.id}
@@ -82,6 +108,8 @@ export default function TranscriptBrowser() {
                   </div>
                 </div>
               ))}
+            </>
+          )}
         </div>
       </div>
     </div>