Add Loading page

src/components/Loading/Loading.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { LoaderCircle } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+type LoadingProps = {
+  copy?: string;
+  ctaCopy: string;
+  onCtaClick: () => void;
+  showLoader: boolean;
+  title: string;
+};
+
+const defaultProps = {
+  showLoader: true,
+};
+
+const Loading = ({
+  copy,
+  ctaCopy,
+  onCtaClick,
+  showLoader,
+  title,
+}: LoadingProps) => {
+  return (
+    <div className="flex h-screen w-full flex-col items-center justify-center">
+      <h2 className="text-3xl">{title}</h2>
+      {showLoader && (
+        <LoaderCircle
+          aria-label="Loading..."
+          className="m-4 h-10 w-10 animate-spin"
+        />
+      )}
+      <Button onClick={onCtaClick} variant="outline">
+        {ctaCopy}
+      </Button>
+      {copy && <p className="mt-12 font-light italic">{copy}</p>}
+    </div>
+  );
+};
+
+Loading.defaultProps = defaultProps;
+
+export default Loading;

src/routes/Session.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { type WebrtcProvider } from 'y-webrtc';
 
+import Loading from '@/components/Loading/Loading';
 import Editor from '@/components/MarkdownEditor/Editor';
 import StatusBar from '@/components/StatusBar/StatusBar';
 import { Separator } from '@/components/ui/separator';
@@ -95,13 +96,12 @@ const Session = () => {
   // Initial loading state
   if (!webrtcProvider || !isConnected || (!isHost && !peers.length)) {
     return (
-      <div>
-        <span>Waiting to connect to the host or existing peers...</span>
-        <span>
-          If you cannot connect, either the host has gone offline or the secret
-          is incorrect.
-        </span>
-      </div>
+      <Loading
+        copy="If you cannot connect, either the host is offline or the secret URL is incorrect."
+        ctaCopy="Stop connecting"
+        onCtaClick={() => navigate(routes.landing.path)}
+        title="Connecting to your host"
+      />
     );
   }
 
@@ -112,19 +112,24 @@ const Session = () => {
     webrtcProvider?.doc.getMap('status').get('ended')
   ) {
     return (
-      <div>
-        <span>The session has ended</span>
-      </div>
+      <Loading
+        ctaCopy="Exit session"
+        onCtaClick={() => navigate(routes.landing.path)}
+        showLoader={false}
+        title="The session has ended"
+      />
     );
   }
 
   // The host has gone offline
   const hostId = findHostId(awarenessStates);
   if (hostId && !isHost && !awarenessStates.get(hostId)) {
     return (
-      <div>
-        <span>The host has gone offline.</span>
-      </div>
+      <Loading
+        ctaCopy="Exit session"
+        onCtaClick={() => navigate(routes.landing.path)}
+        title="Your host has gone offline"
+      />
     );
   }