From 4226428f582821383e7fb1af06cfbadb919c1f7e Mon Sep 17 00:00:00 2001
From: Sara <sara@monadical.com>
Date: Wed, 22 Nov 2023 13:53:12 +0100
Subject: [PATCH] minor styling changes

---
 .../transcripts/[transcriptId]/page.tsx       |  2 ++
 www/app/[domain]/transcripts/shareLink.tsx    | 22 +++++++++++++++----
 .../[domain]/transcripts/waveformLoading.tsx  |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
index 472c573b..54eca9f9 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -15,6 +15,8 @@ import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import WaveformLoading from "../waveformLoading";
 import { useRouter } from "next/navigation";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type TranscriptDetails = {
   params: {
diff --git a/www/app/[domain]/transcripts/shareLink.tsx b/www/app/[domain]/transcripts/shareLink.tsx
index e6449bd3..dd66d6cb 100644
--- a/www/app/[domain]/transcripts/shareLink.tsx
+++ b/www/app/[domain]/transcripts/shareLink.tsx
@@ -6,6 +6,8 @@ import SelectSearch from "react-select-search";
 import "react-select-search/style.css";
 import "../../styles/button.css";
 import "../../styles/form.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 
 type ShareLinkProps = {
   transcriptId: string;
@@ -20,6 +22,7 @@ const ShareLink = (props: ShareLinkProps) => {
   const requireLogin = featureEnabled("requireLogin");
   const [isOwner, setIsOwner] = useState(false);
   const [shareMode, setShareMode] = useState(props.shareMode);
+  const [shareLoading, setShareLoading] = useState(false);
   const userinfo = useFiefUserinfo();
   const api = getApi();
 
@@ -46,6 +49,7 @@ const ShareLink = (props: ShareLinkProps) => {
 
   const updateShareMode = async (selectedShareMode: string) => {
     if (!api) return;
+    setShareLoading(true);
     const updatedTranscript = await api.v1TranscriptUpdate({
       transcriptId: props.transcriptId,
       updateTranscript: {
@@ -53,6 +57,7 @@ const ShareLink = (props: ShareLinkProps) => {
       },
     });
     setShareMode(updatedTranscript.shareMode);
+    setShareLoading(false);
   };
   const privacyEnabled = featureEnabled("privacy");
 
@@ -62,7 +67,7 @@ const ShareLink = (props: ShareLinkProps) => {
       style={{ background: "rgba(96, 165, 250, 0.2)" }}
     >
       {requireLogin && (
-        <p className="text-sm mb-2">
+        <div className="text-sm mb-2">
           {shareMode === "private" && (
             <p>This transcript is private and can only be accessed by you.</p>
           )}
@@ -76,7 +81,7 @@ const ShareLink = (props: ShareLinkProps) => {
           )}
 
           {isOwner && api && (
-            <p>
+            <div className="relative">
               <SelectSearch
                 className="select-search--top select-search"
                 options={[
@@ -86,10 +91,19 @@ const ShareLink = (props: ShareLinkProps) => {
                 ]}
                 value={shareMode}
                 onChange={updateShareMode}
+                closeOnSelect={true}
               />
-            </p>
+              {shareLoading && (
+                <div className="h-4 w-4 absolute top-1/3 right-3 z-10">
+                  <FontAwesomeIcon
+                    icon={faSpinner}
+                    className="animate-spin-slow text-gray-600 flex-grow rounded-lg md:rounded-xl h-4 w-4"
+                  />
+                </div>
+              )}
+            </div>
           )}
-        </p>
+        </div>
       )}
       {!requireLogin && (
         <>
diff --git a/www/app/[domain]/transcripts/waveformLoading.tsx b/www/app/[domain]/transcripts/waveformLoading.tsx
index 68e0c80f..56540927 100644
--- a/www/app/[domain]/transcripts/waveformLoading.tsx
+++ b/www/app/[domain]/transcripts/waveformLoading.tsx
@@ -5,7 +5,7 @@ export default () => (
   <div className="flex flex-grow items-center justify-center h-20">
     <FontAwesomeIcon
       icon={faSpinner}
-      className="animate-spin-slow text-gray-600 flex-grow rounded-lg md:rounded-xl h-10"
+      className="animate-spin-slow text-gray-600 flex-grow rounded-lg md:rounded-xl h-10 w-10"
     />
   </div>
 );