From 836f46b34d2c098e0ec169c88cc7f2390964c3c0 Mon Sep 17 00:00:00 2001
From: Dominic Elm <d3lm@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:13:52 +0200
Subject: [PATCH] feat: tweak ui for redirect screen (#23)

---
 .../bolt/app/components/ui/LoadingDots.tsx    | 27 +++++++++++++++++++
 packages/bolt/app/routes/login.tsx            | 15 +++++++----
 2 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 packages/bolt/app/components/ui/LoadingDots.tsx

diff --git a/packages/bolt/app/components/ui/LoadingDots.tsx b/packages/bolt/app/components/ui/LoadingDots.tsx
new file mode 100644
index 0000000..47d28b7
--- /dev/null
+++ b/packages/bolt/app/components/ui/LoadingDots.tsx
@@ -0,0 +1,27 @@
+import { memo, useEffect, useState } from 'react';
+
+interface LoadingDotsProps {
+  text: string;
+}
+
+export const LoadingDots = memo(({ text }: LoadingDotsProps) => {
+  const [dotCount, setDotCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDotCount((prevDotCount) => (prevDotCount + 1) % 4);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="flex justify-center items-center h-full">
+      <div className="relative">
+        <span>{text}</span>
+        <span className="absolute left-[calc(100%-12px)]">{'.'.repeat(dotCount)}</span>
+        <span className="invisible">...</span>
+      </div>
+    </div>
+  );
+});
diff --git a/packages/bolt/app/routes/login.tsx b/packages/bolt/app/routes/login.tsx
index b609027..2e27a0c 100644
--- a/packages/bolt/app/routes/login.tsx
+++ b/packages/bolt/app/routes/login.tsx
@@ -8,6 +8,7 @@ import {
 import { useFetcher, useLoaderData } from '@remix-run/react';
 import { auth, type AuthAPI } from '@webcontainer/api';
 import { useEffect, useState } from 'react';
+import { LoadingDots } from '~/components/ui/LoadingDots';
 import { createUserSession, isAuthenticated, validateAccessToken } from '~/lib/.server/sessions';
 import { CLIENT_ID, CLIENT_ORIGIN } from '~/lib/constants';
 import { request as doRequest } from '~/lib/fetch';
@@ -96,12 +97,16 @@ export default function Login() {
 
   return (
     <div className="min-h-screen flex items-center justify-center">
-      <div className="max-w-md w-full space-y-8 p-10 bg-white rounded-lg shadow">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Login</h2>
+      {redirected ? (
+        <LoadingDots text="Authenticating" />
+      ) : (
+        <div className="max-w-md w-full space-y-8 p-10 bg-white rounded-lg shadow">
+          <div>
+            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Login</h2>
+          </div>
+          <LoginForm />
         </div>
-        {redirected ? 'Processing auth...' : <LoginForm />}
-      </div>
+      )}
     </div>
   );
 }