Merge pull request #238 from Monadical-SAS/final-summary-loading

adds loading indicator

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,25 @@ 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-2 md:p-4">
+                    <FontAwesomeIcon
+                      icon={faGear}
+                      className="animate-spin-slow h-14 w-14 md:h-20 md:w-20"
+                    />
+                  </div>
+                  <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>
           </div>
 

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: [],