From b989f2b54a8b76f58c5b46441d7db5121e19d2e3 Mon Sep 17 00:00:00 2001
From: Sara <sara@monadical.com>
Date: Fri, 22 Sep 2023 15:50:38 +0200
Subject: [PATCH 1/2] adds loading indicator

---
 www/app/transcripts/new/page.tsx | 23 +++++++++++++++++++----
 www/tailwind.config.js           |  3 +++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx
index 10bfe789..2a01abf0 100644
--- a/www/app/transcripts/new/page.tsx
+++ b/www/app/transcripts/new/page.tsx
@@ -9,9 +9,10 @@ import useAudioDevice from "../useAudioDevice";
 import "../../styles/button.css";
 import { Topic } from "../webSocketTypes";
 import getApi from "../../lib/getApi";
-import AudioInputsDropdown from "../audioInputsDropdown";
 import LiveTrancription from "../liveTranscription";
 import DisconnectedIndicator from "../disconnectedIndicator";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 
 const TranscriptCreate = () => {
   const [stream, setStream] = useState<MediaStream | null>(null);
@@ -40,6 +41,7 @@ const TranscriptCreate = () => {
     requestPermission,
     getAudioStream,
   } = useAudioDevice();
+  const [hasRecorded, setHasRecorded] = useState(false);
 
   return (
     <>
@@ -50,6 +52,7 @@ const TranscriptCreate = () => {
             onStop={() => {
               webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
               setStream(null);
+              setHasRecorded(true);
             }}
             topics={webSockets.topics}
             getAudioStream={getAudioStream}
@@ -64,9 +67,21 @@ const TranscriptCreate = () => {
               useActiveTopic={useActiveTopic}
             />
             <section className="w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
-              <div className="py-2 h-auto">
-                <LiveTrancription text={webSockets.transcriptText} />
-              </div>
+              {!hasRecorded ? (
+                <div className="py-2 h-auto">
+                  <LiveTrancription text={webSockets.transcriptText} />
+                </div>
+              ) : (
+                <div className="flex flex-col justify-center align center text-center">
+                  <div className="p-4">
+                    <FontAwesomeIcon
+                      icon={faGear}
+                      className="animate-spin-slow h-20 w-20"
+                    />
+                  </div>
+                  <p>Your final summary is being processed.</p>
+                </div>
+              )}
             </section>
           </div>
 
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index 7536965d..15f0dfb9 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -12,6 +12,9 @@ module.exports = {
         layout: "auto auto minmax(0, 1fr)",
         "mobile-inner": "minmax(0, 2fr) minmax(0, 1fr)",
       },
+      animation: {
+        "spin-slow": "spin 3s linear infinite",
+      },
     },
   },
   plugins: [],

From cd648f428b9ac8c186131c6ebebd85bb3c432b6b Mon Sep 17 00:00:00 2001
From: Sara <sara@monadical.com>
Date: Fri, 22 Sep 2023 17:01:17 +0200
Subject: [PATCH 2/2] fix copy

---
 www/app/transcripts/new/page.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/www/app/transcripts/new/page.tsx b/www/app/transcripts/new/page.tsx
index 2a01abf0..15ce5ca9 100644
--- a/www/app/transcripts/new/page.tsx
+++ b/www/app/transcripts/new/page.tsx
@@ -73,13 +73,17 @@ const TranscriptCreate = () => {
                 </div>
               ) : (
                 <div className="flex flex-col justify-center align center text-center">
-                  <div className="p-4">
+                  <div className="p-2 md:p-4">
                     <FontAwesomeIcon
                       icon={faGear}
-                      className="animate-spin-slow h-20 w-20"
+                      className="animate-spin-slow h-14 w-14 md:h-20 md:w-20"
                     />
                   </div>
-                  <p>Your final summary is being processed.</p>
+                  <p>
+                    We are generating the final summary for you. This may take a
+                    couple of minutes. Please do not navigate away from the page
+                    during this time.
+                  </p>
                 </div>
               )}
             </section>