fix: initial flash of view overlap (#249)

Author: thomasyuill-livekit

app/(app)/layout.tsx

@@ -18,7 +18,9 @@ export default async function AppLayout({ children }: AppLayoutProps) {
           href="https://livekit.io"
           className="scale-100 transition-transform duration-300 hover:scale-110"
         >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src={logo} alt={`${companyName} Logo`} className="block size-6 dark:hidden" />
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={logoDark ?? logo}
             alt={`${companyName} Logo`}

app/(app)/opengraph-image.tsx

@@ -165,6 +165,7 @@ export default async function Image() {
             gap: 10,
           }}
         >
+          {/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}
           <img src={wordmarkSrcBase64} width={wordmarkSize.width} height={wordmarkSize.height} />
         </div>
         {/* logo */}
@@ -178,6 +179,7 @@ export default async function Image() {
             gap: 10,
           }}
         >
+          {/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}
           <img src={logoSrcBase64} width={logoSize.width} height={logoSize.height} />
         </div>
         {/* title */}

components/app.tsx

@@ -77,13 +77,13 @@ export function App({ appConfig }: AppProps) {
   const { startButtonText } = appConfig;
 
   return (
-    <>
+    <main>
       <MotionWelcome
         key="welcome"
         startButtonText={startButtonText}
         onStartCall={() => setSessionStarted(true)}
         disabled={sessionStarted}
-        initial={{ opacity: 0 }}
+        initial={{ opacity: 1 }}
         animate={{ opacity: sessionStarted ? 0 : 1 }}
         transition={{ duration: 0.5, ease: 'linear', delay: sessionStarted ? 0 : 0.5 }}
       />
@@ -108,6 +108,6 @@ export function App({ appConfig }: AppProps) {
       </RoomContext.Provider>
 
       <Toaster />
-    </>
+    </main>
   );
 }

components/session-view.tsx

@@ -89,14 +89,15 @@ export const SessionView = ({
   };
 
   return (
-    <main
+    <section
       ref={ref}
       inert={disabled}
-      className={
+      className={cn(
+        'opacity-0',
         // prevent page scrollbar
         // when !chatOpen due to 'translate-y-20'
-        cn(!chatOpen && 'max-h-svh overflow-hidden')
-      }
+        !chatOpen && 'max-h-svh overflow-hidden'
+      )}
     >
       <ChatMessageView
         className={cn(
@@ -172,6 +173,6 @@ export const SessionView = ({
           <div className="from-background border-background absolute top-0 left-0 h-12 w-full -translate-y-full bg-gradient-to-t to-transparent" />
         </motion.div>
       </div>
-    </main>
+    </section>
   );
 };

components/welcome.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 
 interface WelcomeProps {
   disabled: boolean;
@@ -13,10 +14,13 @@ export const Welcome = ({
   ref,
 }: React.ComponentProps<'div'> & WelcomeProps) => {
   return (
-    <div
+    <section
       ref={ref}
       inert={disabled}
-      className="fixed inset-0 z-10 mx-auto flex h-svh flex-col items-center justify-center text-center"
+      className={cn(
+        'bg-background fixed inset-0 mx-auto flex h-svh flex-col items-center justify-center text-center',
+        disabled ? 'z-10' : 'z-20'
+      )}
     >
       <svg
         width="64"
@@ -38,18 +42,20 @@ export const Welcome = ({
       <Button variant="primary" size="lg" onClick={onStartCall} className="mt-6 w-64 font-mono">
         {startButtonText}
       </Button>
-      <p className="text-fg1 m fixed bottom-5 left-1/2 w-full max-w-prose -translate-x-1/2 pt-1 text-xs leading-5 font-normal text-pretty md:text-sm">
-        Need help getting set up? Check out the{' '}
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://docs.livekit.io/agents/start/voice-ai/"
-          className="underline"
-        >
-          Voice AI quickstart
-        </a>
-        .
-      </p>
-    </div>
+      <footer className="fixed bottom-5 left-0 z-20 flex w-full items-center justify-center">
+        <p className="text-fg1 max-w-prose pt-1 text-xs leading-5 font-normal text-pretty md:text-sm">
+          Need help getting set up? Check out the{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://docs.livekit.io/agents/start/voice-ai/"
+            className="underline"
+          >
+            Voice AI quickstart
+          </a>
+          .
+        </p>
+      </footer>
+    </section>
   );
 };