From 21cb6bb27b56a3e0b35f6c0b798d996d12493970 Mon Sep 17 00:00:00 2001
From: dozyio <37986489+dozyio@users.noreply.github.com>
Date: Tue, 3 Sep 2024 16:16:31 +0100
Subject: [PATCH] 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 | 32 ++++++++++++++++++++++++++++++
 js-peer/src/context/ctx.tsx        |  7 ++++---
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 js-peer/src/components/booting.tsx

diff --git a/js-peer/src/components/booting.tsx b/js-peer/src/components/booting.tsx
new file mode 100644
index 00000000..358b967d
--- /dev/null
+++ 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
index 1bb2ac57..44857510 100644
--- 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} />
     )
   }