feat: loading screen (#176)

* feat: loading screen

* chore: casing

---------

Co-authored-by: Daniel Norman <1992255+2color@users.noreply.github.com>

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>
+  )
+}

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} />
     )
   }