feat: loading screen (#176)

* feat: loading screen * chore: casing --------- Co-authored-by: Daniel Norman <[email protected]>
libp2p · Sep 3, 2024 · 21cb6bb · 21cb6bb
1 parent 4008981
commit 21cb6bb
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/js-peer/src/components/booting.tsx b/js-peer/src/components/booting.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Image from 'next/image'
+import Spinner from './spinner'
+
+interface Props {
+  error?: string
+}
+
+export function Booting({ error }: Props) {
+  return (
+    <div className="grid h-screen place-items-center">
+      <div className="text-center">
+        <Image
+          src="/libp2p-logo.svg"
+          alt="libp2p logo"
+          height="156"
+          width="156"
+          className="text-white mx-auto mb-5"
+        />
+        <h2 className="text-3xl font-bold text-gray-900 mb-2">Initializing libp2p peer</h2>
+        {!error && (
+          <>
+            <p className="text-lg text-gray-900 mb-2">Connecting to bootstrap nodes...</p>
+            <Spinner />
+          </>
+        )}
+        {error && error !== '' && <p className="text-lg text-gray-900">{error}</p>}
+        {error && error === '' && <p className="text-lg text-gray-900">Unknown error</p>}
+      </div>
+    </div>
+  )
+}
diff --git a/js-peer/src/context/ctx.tsx b/js-peer/src/context/ctx.tsx
@@ -5,6 +5,7 @@ import { startLibp2p } from '../lib/libp2p'
 import { ChatProvider } from './chat-ctx'
 import { PubSub } from '@libp2p/interface'
 import { Identify } from '@libp2p/identify'
+import { Booting } from '@/components/booting'
 
 type Libp2pType = Libp2p<{ pubsub: PubSub; identify: Identify }>
 
@@ -21,6 +22,7 @@ interface WrapperProps {
 let loaded = false
 export function AppWrapper({ children }: WrapperProps) {
   const [libp2p, setLibp2p] = useState<Libp2pType>()
+  const [error, setError] = useState('')
 
   useEffect(() => {
     const init = async () => {
@@ -35,6 +37,7 @@ export function AppWrapper({ children }: WrapperProps) {
         setLibp2p(libp2p)
       } catch (e) {
         console.error('failed to start libp2p', e)
+        setError(`failed to start libp2p ${e}`)
       }
     }
 
@@ -43,9 +46,7 @@ export function AppWrapper({ children }: WrapperProps) {
 
   if (!libp2p) {
     return (
-      <div>
-        <h2>Initializing libp2p peer...</h2>
-      </div>
+        <Booting error={error} />
     )
   }