Feature/logo loading

src/components/Loading.tsx

@@ -0,0 +1,26 @@
+import Image from 'next/image'
+
+type LoadingProps = {
+  logoPath?: string
+  isFadingOut?: boolean
+}
+
+export default function Loading({
+  logoPath = '/intermission.png',
+  isFadingOut = false,
+}: LoadingProps) {
+  return (
+    <div className="h-full w-full loading-container">
+      <div className="loading-logo-container">
+        <Image
+          src={logoPath}
+          alt="Logo"
+          width={400}
+          height={100}
+          className={`loading-logo ${isFadingOut ? 'loading-logo-fade-out' : ''}`}
+          priority
+        />
+      </div>
+    </div>
+  )
+}

src/components/hooks/useLoadingTransition.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+import config from '@/config'
+
+type UseLoadingTransitionOptions = {
+  isDataReady: boolean
+  isDataLoading?: boolean
+}
+
+export const useLoadingTransition = ({
+  isDataReady,
+  isDataLoading = false,
+}: UseLoadingTransitionOptions) => {
+  const [isLoading, setIsLoading] = useState(true)
+  const [showContent, setShowContent] = useState(false)
+  const [isLogoFadingOut, setIsLogoFadingOut] = useState(false)
+
+  useEffect(() => {
+    if (isDataReady) {
+      if (config.debug) {
+        // ローディング画面を表示し、ロゴがフェードイン完了後にフェードアウト
+        const timer = setTimeout(() => {
+          setIsLogoFadingOut(true)
+          // ロゴのフェードアウト後にコンテンツを表示
+          setTimeout(() => {
+            setShowContent(true)
+            // その後ローディングを非表示
+            setTimeout(() => {
+              setIsLoading(false)
+            }, 100)
+          }, 800) // ロゴのフェードアウト時間
+        }, 1500) // ロゴのフェードイン完了後（1.5秒）
+        return () => {
+          clearTimeout(timer)
+        }
+      } else {
+        // debugモードでない場合は即座に切り替え
+        setIsLoading(false)
+        setShowContent(true)
+      }
+    } else if (!isDataLoading) {
+      // データがない場合は即座に切り替え
+      setIsLoading(false)
+      setShowContent(true)
+    }
+  }, [isDataReady, isDataLoading])
+
+  return {
+    isLoading,
+    showContent,
+    isLogoFadingOut,
+  }
+}

src/pages/break-dk/talks/[talkId].tsx

@@ -3,11 +3,14 @@ import Page1 from '@/components/Page1'
 import Page2, { AvatarPreLoader } from '@/components/Page2'
 import Page3 from '@/components/Page3'
 import Page4 from '@/components/Page4'
+import Loading from '@/components/Loading'
 import { useGetTalksAndTracks } from '@/components/hooks/useGetTalksAndTracks'
 import { PageCtx, PageCtxProvider } from '@/components/models/pageContext'
 import config, { extendConfig } from '@/config'
 import { useRouter } from 'next/router'
 import { useContext, useEffect } from 'react'
+import Image from 'next/image'
+import { useLoadingTransition } from '@/components/hooks/useLoadingTransition'
 
 function updateCache() {
   if (navigator.serviceWorker && navigator.serviceWorker.controller) {
@@ -23,7 +26,14 @@ function Pages() {
   }, [router.query])
 
   const { current, setTotalPage, goNextPage } = useContext(PageCtx)
-  const { isLoading, view } = useGetTalksAndTracks(talkId as string | null)
+  const { isLoading: isDataLoading, view } = useGetTalksAndTracks(
+    talkId as string | null
+  )
+
+  const { isLoading, showContent, isLogoFadingOut } = useLoadingTransition({
+    isDataReady: !!view,
+    isDataLoading,
+  })
 
   const pages = [
     <Page1 key={1} view={view} isDk={true} />,
@@ -42,14 +52,10 @@ function Pages() {
   // CM なしの場合
   // const shouldPlayAudio = true
 
-  if (isLoading) {
-    return <div className="text-white">Loading...</div>
-  }
   return (
     <>
       <div>
         <link rel="stylesheet" href="https://use.typekit.net/egz6rzg.css" />
-        <link rel="stylesheet" href="https://use.typekit.net/hbv7ezy.css" />
       </div>
       {config.debug && (
         <>
@@ -69,8 +75,33 @@ function Pages() {
       )}
       <AudioPlayer src={audioSrc} shouldPlay={shouldPlayAudio} />
       <AvatarPreLoader view={view}></AvatarPreLoader>
-      <div className="w-[1920px] h-[1080px] bg-[url('/cndw2024/background.png')]">
-        {pages[current]}
+      <div className="w-[1920px] h-[1080px] relative">
+        <Image
+          src="/cndw2024/background.png"
+          alt="background"
+          className="-z-10"
+          fill
+          style={{ objectFit: 'cover' }}
+          priority
+        />
+        {/* ローディング画面 */}
+        {isLoading && (
+          <div className="absolute inset-0 z-10">
+            <Loading
+              isFadingOut={isLogoFadingOut}
+              logoPath="/cndw2025/logo.png"
+            />
+          </div>
+        )}
+        {/* コンテンツ */}
+        {showContent && (
+          <div className="absolute inset-0 content-fade-in">
+            {pages[current]}
+          </div>
+        )}
+        {!isLoading && !showContent && (
+          <div className="absolute inset-0">{pages[current]}</div>
+        )}
       </div>
       <div className="w-[1280px] h-[300px] bg-black relative"></div>
     </>

src/pages/break/talks/[talkId].tsx

@@ -3,6 +3,7 @@ import Page1 from '@/components/Page1'
 import Page2, { AvatarPreLoader } from '@/components/Page2'
 import Page3 from '@/components/Page3'
 import Page4 from '@/components/Page4'
+import Loading from '@/components/Loading'
 import { PageCtx, PageCtxProvider } from '@/components/models/pageContext'
 import { TalkView } from '@/components/models/talkView'
 import config, { extendConfig } from '@/config'
@@ -12,6 +13,7 @@ import { tracks } from '@/data/tracks'
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useMemo } from 'react'
 import Image from 'next/image'
+import { useLoadingTransition } from '@/components/hooks/useLoadingTransition'
 
 function updateCache() {
   if (navigator.serviceWorker && navigator.serviceWorker.controller) {
@@ -35,6 +37,10 @@ function Pages() {
     return TalkView.withoutDk(talkId as string, talks, tracks, speakers)
   }, [talkId])
 
+  const { isLoading, showContent, isLogoFadingOut } = useLoadingTransition({
+    isDataReady: !!view,
+  })
+
   const pages = [
     <Page1 key={1} view={view} isDk={false} />,
     <Page2 key={2} view={view} isDk={false} />,
@@ -50,14 +56,10 @@ function Pages() {
   // const shouldPlayAudio = current !== pages.length // Page4を使用しない場合
   const shouldPlayAudio = current !== pages.length - 1
 
-  if (!view && config.debug) {
-    return <div className="text-white">Loading...</div>
-  }
   return (
     <>
       <div>
         <link rel="stylesheet" href="https://use.typekit.net/egz6rzg.css" />
-        <link rel="stylesheet" href="https://use.typekit.net/hbv7ezy.css" />
       </div>
       {config.debug && (
         <>
@@ -86,7 +88,24 @@ function Pages() {
           style={{ objectFit: 'cover' }}
           priority
         />
-        {pages[current]}
+        {/* ローディング画面 */}
+        {isLoading && (
+          <div className="absolute inset-0 z-10">
+            <Loading
+              isFadingOut={isLogoFadingOut}
+              logoPath="/o11yconjp2025/logo.svg"
+            />
+          </div>
+        )}
+        {/* コンテンツ */}
+        {showContent && (
+          <div className="absolute inset-0 content-fade-in">
+            {pages[current]}
+          </div>
+        )}
+        {!isLoading && !showContent && (
+          <div className="absolute inset-0">{pages[current]}</div>
+        )}
       </div>
       <div className="w-[1280px] h-[300px] bg-black relative"></div>
     </>