From c02cb1c03af48855a1002554855e4b8cf795463c Mon Sep 17 00:00:00 2001
From: Vaibhav Rai <raivaibhav08@gmail.com>
Date: Wed, 10 Apr 2024 11:03:41 +0530
Subject: [PATCH] fix: Fix LCP of app (#30)

* Issue-29: Fix LCP of app

Relates to https://github.com/deepgram-devs/deepgram-conversational-demo/issues/29
- It fixes accessibility
- Fixes LCP, performance increase from 50 to 70%

* Fix Text: follow -> share
---
 app/components/Conversation.tsx | 14 +-------------
 app/components/InitialLoad.tsx  | 17 +++++++++++++----
 app/layout.tsx                  |  2 +-
 app/page.tsx                    |  9 ++++++---
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/components/Conversation.tsx b/app/components/Conversation.tsx
index 99b11cf8..b8333b31 100644
--- a/app/components/Conversation.tsx
+++ b/app/components/Conversation.tsx
@@ -416,18 +416,6 @@ export default function Conversation(): JSX.Element {
     }
   }, [chatMessages]);
 
-  /**
-   * loading message (api key)
-   */
-  if (!connection) {
-    return (
-      <div className="w-auto h-full items-center flex justify-center">
-        <Spinner size={"sm"} className="-mt-1 mr-2" />
-        Connecting...
-      </div>
-    );
-  }
-
   return (
     <>
       <NextUIProvider className="h-full">
@@ -442,7 +430,7 @@ export default function Conversation(): JSX.Element {
                 >
                   <div className="grid grid-cols-12 overflow-x-auto gap-y-2">
                     {initialLoad ? (
-                      <InitialLoad fn={startConversation} />
+                      <InitialLoad fn={startConversation} connecting={!connection} />
                     ) : (
                       <>
                         {chatMessages.length > 0 &&
diff --git a/app/components/InitialLoad.tsx b/app/components/InitialLoad.tsx
index 3bf9f354..8486d6b1 100644
--- a/app/components/InitialLoad.tsx
+++ b/app/components/InitialLoad.tsx
@@ -2,13 +2,15 @@ import { ExclamationIcon } from "./icons/ExclamationIcon";
 import { Headphones } from "./Headphones";
 import { isBrowser, isIOS } from "react-device-detect";
 import Image from "next/image";
+import { Spinner } from "@nextui-org/react";
 
-export const InitialLoad = ({ fn }: { fn: () => void }) => {
+export const InitialLoad = ({ fn, connecting = true }: { fn: () => void, connecting: boolean }) => {
   return (
     <>
       <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 md:col-start-3 md:col-end-11 lg:col-start-4 lg:col-end-10 p-3 mb-1/2">
         <button
-          onClick={() => fn()}
+          disabled={connecting}
+          onClick={() => !connecting && fn()}
           type="button"
           className="relative block w-full glass p-6 sm:p-8 lg:p-12 rounded-xl"
         >
@@ -25,8 +27,15 @@ export const InitialLoad = ({ fn }: { fn: () => void }) => {
             </ul>
           </div>
           <span className="mt-4 block font-semibold">
-            <div className="bg-white text-black rounded px-10 py-3 font-semibold sm:w-fit sm:mx-auto">
-              {isBrowser ? "Click" : "Tap"} here to start
+            <div className="bg-white text-black rounded px-10 py-3 font-semibold sm:w-fit sm:mx-auto opacity-90">
+              {connecting ? (
+                <div className="w-auto h-full items-center flex justify-center opacity-40 cursor-not-allowed">
+                  <Spinner size={"sm"} className="-mt-1 mr-2" />
+                  Connecting...
+                </div>
+              ) : (
+                <>{isBrowser ? "Click" : "Tap"} here to start</>
+              )}
             </div>
           </span>
           <span className="mt-4 block text-sm text-gray-100/70">
diff --git a/app/layout.tsx b/app/layout.tsx
index b9d23d1a..2ee9199a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -24,7 +24,7 @@ export const viewport: Viewport = {
   themeColor: "#000000",
   initialScale: 1,
   width: "device-width",
-  maximumScale: 1,
+  // maximumScale: 1, hitting accessability
 };
 
 export const metadata: Metadata = {
diff --git a/app/page.tsx b/app/page.tsx
index b8f6f79e..0af434de 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,19 +1,19 @@
 "use client";
 
-import Conversation from "./components/Conversation";
 import Image from "next/image";
 import GitHubButton from "react-github-btn";
 
 export const runtime = "edge";
-import * as FullStory from "@fullstory/browser";
+import { init } from "@fullstory/browser";
 import { useEffect } from "react";
 import { XIcon } from "./components/icons/XIcon";
 import { FacebookIcon } from "./components/icons/FacebookIcon";
 import { LinkedInIcon } from "./components/icons/LinkedInIcon";
+import Conversation from "./components/Conversation";
 
 export default function Home() {
   useEffect(() => {
-    FullStory.init({ orgId: "5HWAN" });
+    init({ orgId: "5HWAN" });
   }, []);
 
   return (
@@ -80,6 +80,7 @@ export default function Home() {
 
                 return e.preventDefault();
               }}
+              aria-label="share on twitter"
               target="_blank"
             >
               <XIcon className="mb-1" />
@@ -95,6 +96,7 @@ export default function Home() {
 
                 return e.preventDefault();
               }}
+              aria-label="share on Linkedin"
             >
               <LinkedInIcon className="mb-1" />
             </a>
@@ -110,6 +112,7 @@ export default function Home() {
                 return e.preventDefault();
               }}
               target="_blank"
+              aria-label="share on Facebook"
             >
               <FacebookIcon className="mb-1" />
             </a>