feat: add message for game live stream delay

Author: kevinjosethomas

src/components/Common/DelayedLoading.tsx

@@ -6,13 +6,15 @@ interface DelayedLoadingProps {
   isLoading: boolean
   transparent?: boolean
   delay?: number
+  message?: React.ReactNode
   children: React.ReactNode
 }
 
 export const DelayedLoading: React.FC<DelayedLoadingProps> = ({
   isLoading,
   transparent = false,
   delay = 1000,
+  message,
   children,
 }) => {
   const [showLoading, setShowLoading] = useState(false)
@@ -46,7 +48,7 @@ export const DelayedLoading: React.FC<DelayedLoadingProps> = ({
           transition={{ duration: 0.3 }}
           className="my-auto"
         >
-          <Loading transparent={transparent} />
+          <Loading transparent={transparent} message={message} />
         </motion.div>
       ) : !isLoading ? (
         <motion.div

src/components/Common/Loading.tsx

@@ -14,9 +14,13 @@ const states = [
 
 interface LoadingProps {
   transparent?: boolean
+  message?: React.ReactNode
 }
 
-export const Loading: React.FC<LoadingProps> = ({ transparent = false }) => {
+export const Loading: React.FC<LoadingProps> = ({
+  transparent = false,
+  message,
+}) => {
   const [currentIndex, setCurrentIndex] = useState(0)
   const [renderKey, setRenderKey] = useState(0)
 
@@ -65,6 +69,11 @@ export const Loading: React.FC<LoadingProps> = ({ transparent = false }) => {
           </div>
         </div>
         <h2 className="text-2xl font-semibold">Loading...</h2>
+        {message ? (
+          <p className="max-w-prose px-4 text-center text-secondary">
+            {message}
+          </p>
+        ) : null}
       </div>
     </div>
   )

src/pages/analysis/stream/[gameId].tsx

@@ -188,8 +188,19 @@ const StreamAnalysisPage: NextPage = () => {
         streamController.game &&
         !streamController.streamState.gameEnded ? (
           <div className="absolute left-0 top-0 z-50">
-            <DelayedLoading transparent isLoading={true}>
-              <p>Loading...</p>
+            <DelayedLoading
+              transparent
+              isLoading={true}
+              message={
+                <>
+                  Connecting to Lichess game {gameId}...
+                  <br />
+                  Lichess intentionally adds a short delay to live move data to
+                  reduce engine-assisted cheating. The stream will start soon.
+                </>
+              }
+            >
+              <></>
             </DelayedLoading>
           </div>
         ) : null}