feat: loading indicator

.env

@@ -1,2 +1,2 @@
-BUILD_SERVER_BASE_URL=
+BUILD_SERVER_BASE_URL=https://playground.test.aelf.dev
 GA_TAG=

app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, Suspense } from "react";
 import TopMenu from "@/components/top-menu";
 import clsx from "clsx";
 import { GoogleAnalytics } from "@next/third-parties/google";
@@ -32,7 +32,9 @@ export default function RootLayout({ children }: PropsWithChildren) {
           disableTransitionOnChange
         >
           <TopMenu />
-          <main className="h-[calc(100vh-66px)] overflow-auto">{children}</main>
+          <main className="h-[calc(100vh-66px)] overflow-auto">
+            <Suspense>{children}</Suspense>
+          </main>
         </ThemeProvider>
       </body>
       {gaId ? <GoogleAnalytics gaId={gaId} /> : null}

app/page.tsx

@@ -6,6 +6,7 @@ import {
 } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { ReactNode } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 
 function HomeCard({
   title,
@@ -32,7 +33,6 @@ function HomeCard({
 }
 
 export default function Home() {
-
   const links = [
     {
       title: "Hello World",
@@ -84,17 +84,17 @@ export default function Home() {
         <h3 className="text-xl font-bold">... or generate from a prompt:</h3>
         <div className="grid w-full max-w-3xl grid-cols-1 gap-6 md:grid-cols-2">
           <div className="rounded-lg border bg-background p-6 shadow-sm">
-            <img
-              src="/placeholder.svg"
-              width={400}
-              height={225}
-              alt="Deepchat here"
-              className="aspect-video object-cover rounded-md"
-            />
+            <div className="flex flex-col space-y-3">
+              <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
           </div>
           <div className="space-y-4">
             <h4 className="text-2xl font-bold">DeepChat AI</h4>
-            <p className="text-muted-foreground">Some description.</p>
+            <p className="text-muted-foreground">Coming soon.</p>
           </div>
         </div>
       </div>

app/workspaces/loading.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="container grid grid-cols-1 gap-8 px-4 py-12 md:grid-cols-3 md:gap-12 md:px-6 lg:py-16">
+      <div>
+        <h1 className="text-2xl mb-2">Create a new workspace</h1>
+        <Skeleton className="h-4 w-12 mt-3" />
+        <Skeleton className="h-8 w-full mt-3" />
+      </div>
+      <div className="md:col-span-2">
+        <h1 className="text-2xl mb-2">Open an existing workspace</h1>
+        <Skeleton className="h-12 w-12 rounded-full" />
+      </div>
+    </div>
+  );
+}

components/new-workspace-form.tsx

@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/select";
 import { useRouter } from "next/navigation";
 import { db } from "@/data/db";
+import { Loader2 } from "lucide-react";
 
 const FormSchema = z.object({
   name: z.string().min(2, {
@@ -128,7 +129,16 @@ export function WorkspaceForm({
             </FormItem>
           )}
         />
-        <Button type="submit">Submit</Button>
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Please wait
+            </>
+          ) : (
+            "Submit"
+          )}
+        </Button>
       </form>
     </Form>
   );

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }