more prod changes

src/components/Downloader.tsx

@@ -93,6 +93,7 @@ export function ConnectingToUploader({
           </p>
         </div>
       </div>
+      <ReturnHome />
     </>
   )
 }

src/components/Spinner.tsx

@@ -1,4 +1,7 @@
+'use client'
+
 import React, { JSX } from 'react'
+import { useRotatingSpinner } from '../hooks/useRotatingSpinner'
 
 function Pizza({ isRotating }: { isRotating?: boolean }): JSX.Element {
   return (
@@ -1680,11 +1683,10 @@ function Arrow({ direction }: { direction: 'up' | 'down' }): JSX.Element {
 
 export default function Spinner({
   direction,
-  isRotating,
 }: {
   direction: 'up' | 'down'
-  isRotating?: boolean
 }): JSX.Element {
+  const isRotating = useRotatingSpinner()
   return (
     <div className="relative w-[300px] h-[300px]">
       <Pizza isRotating={isRotating} />

src/components/Uploader.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { JSX, useCallback } from 'react'
+import React, { JSX, useCallback, useEffect } from 'react'
 import { UploadedFile, UploaderConnectionStatus } from '../types'
 import { useWebRTCPeer } from './WebRTCProvider'
 import QRCode from 'react-qr-code'
@@ -11,6 +11,7 @@ import { useUploaderConnections } from '../hooks/useUploaderConnections'
 import { CopyableInput } from './CopyableInput'
 import { ConnectionListItem } from './ConnectionListItem'
 import { ErrorMessage } from './ErrorMessage'
+import { setRotating } from '../hooks/useRotatingSpinner'
 
 const QR_CODE_SIZE = 128
 
@@ -33,14 +34,18 @@ export default function Uploader({
     onStop()
   }, [stop, onStop])
 
-  if (isLoading || !longSlug || !shortSlug) {
-    return <Loading text="Creating channel..." />
-  }
-
   const activeDownloaders = connections.filter(
     (conn) => conn.status === UploaderConnectionStatus.Uploading,
   ).length
 
+  useEffect(() => {
+    setRotating(activeDownloaders > 0)
+  }, [activeDownloaders])
+
+  if (isLoading || !longSlug || !shortSlug) {
+    return <Loading text="Creating channel..." />
+  }
+
   if (error) {
     return <ErrorMessage message={error.message} />
   }

src/hooks/useDownloader.ts

@@ -15,6 +15,7 @@ import {
   mobileVendor,
   mobileModel,
 } from 'react-device-detect'
+import { setRotating } from './useRotatingSpinner'
 const cleanErrorMessage = (errorMessage: string): string =>
   errorMessage.startsWith('Could not connect to peer')
     ? 'Could not connect to the uploader. Did they close their browser?'
@@ -86,6 +87,7 @@ export function useDownloader(uploaderPeerID: string): {
             break
           case MessageType.Chunk:
             processChunk.current?.(message)
+            setRotating(true)
             break
           case MessageType.Error:
             console.error(message.error)
@@ -103,6 +105,7 @@ export function useDownloader(uploaderPeerID: string): {
     }
 
     const handleClose = () => {
+      setRotating(false)
       setDataConnection(null)
       setIsConnected(false)
       setIsDownloading(false)

src/hooks/useRotatingSpinner.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+
+type RotationListener = (isRotating: boolean) => void
+
+let isRotating = false
+const listeners = new Set<RotationListener>()
+
+export function setRotating(rotating: boolean): void {
+    isRotating = rotating
+    notifyListeners()
+}
+
+export function getRotating(): boolean {
+    return isRotating
+}
+
+export function addRotationListener(listener: RotationListener): void {
+    listeners.add(listener)
+}
+
+export function removeRotationListener(listener: RotationListener): void {
+    listeners.delete(listener)
+}
+
+function notifyListeners(): void {
+    listeners.forEach(listener => listener(isRotating))
+}
+
+export function useRotatingSpinner(): boolean {
+    const [rotating, setRotatingState] = useState(isRotating)
+
+    useEffect(() => {
+        const listener = (newRotating: boolean) => {
+            setRotatingState(newRotating)
+        }
+
+        addRotationListener(listener)
+        return () => removeRotationListener(listener)
+    }, [])
+
+    return rotating
+}

src/hooks/useUploaderConnections.ts

@@ -7,9 +7,10 @@ import {
 } from '../types'
 import { decodeMessage, Message, MessageType } from '../messages'
 import { getFileName } from '../fs'
+import { setRotating } from './useRotatingSpinner'
 
 // TODO(@kern): Test for better values
-const MAX_CHUNK_SIZE = 10 * 1024 * 1024 // 10 Mi
+const MAX_CHUNK_SIZE = 256 * 1024 // 256 KB
 
 function validateOffset(
   files: UploadedFile[],

tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        'spin-slow': 'spin 16s linear infinite',
+      },
+    },
   },
   plugins: [],
   darkMode: 'class',