create-nextblock 0.2.46 → 0.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.46",
+  "version": "0.2.47",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/cms/dashboard/actions.ts

@@ -0,0 +1,98 @@
+'use server'
+
+import { createClient } from "@nextblock-cms/db/server";
+import { formatDistanceToNow } from 'date-fns';
+
+export type DashboardStats = {
+  totalPages: number;
+  totalPosts: number;
+  totalUsers: number;
+  recentContent: {
+    type: 'post' | 'page';
+    title: string;
+    author: string;
+    date: string;
+    status: string;
+  }[];
+  scheduledContent: {
+    title: string;
+    date: string;
+    type: string;
+  }[];
+};
+
+export async function getDashboardStats(): Promise<DashboardStats> {
+  const supabase = createClient();
+  const now = new Date().toISOString();
+
+  // Parallelize queries
+  const [
+    { count: totalPages },
+    { count: totalPosts },
+    { count: totalUsers },
+    { data: recentPosts },
+    { data: recentPages },
+    { data: scheduledPosts }
+  ] = await Promise.all([
+    supabase.from('pages').select('*', { count: 'exact', head: true }),
+    supabase.from('posts').select('*', { count: 'exact', head: true }),
+    supabase.from('profiles').select('*', { count: 'exact', head: true }),
+    
+    // Recent Posts
+    supabase.from('posts')
+      .select('title, status, updated_at, created_at, profiles(full_name)')
+      .order('updated_at', { ascending: false })
+      .limit(5),
+      
+    // Recent Pages
+    supabase.from('pages')
+      .select('title, status, updated_at, created_at')
+      .order('updated_at', { ascending: false })
+      .limit(5),
+
+    // Scheduled Posts (published_at > now)
+    supabase.from('posts')
+      .select('title, published_at')
+      .gt('published_at', now)
+      .order('published_at', { ascending: true })
+      .limit(5)
+  ]);
+
+  // Process Recent Content
+  const combinedRecent = [
+    ...(recentPosts?.map((p: any) => ({
+      type: 'post' as const,
+      title: p.title,
+      author: p.profiles?.full_name || 'Unknown',
+      date: p.updated_at || p.created_at,
+      status: p.status
+    })) || []),
+    ...(recentPages?.map((p: any) => ({
+      type: 'page' as const,
+      title: p.title,
+      author: 'System', // Pages don't always track author in this schema
+      date: p.updated_at || p.created_at,
+      status: p.status
+    })) || [])
+  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+   .slice(0, 5)
+   .map(item => ({
+     ...item,
+     date: formatDistanceToNow(new Date(item.date), { addSuffix: true })
+   }));
+
+  // Process Scheduled Content
+  const processedScheduled = (scheduledPosts || []).map((p: any) => ({
+    title: p.title,
+    date: new Date(p.published_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }),
+    type: 'Post'
+  }));
+
+  return {
+    totalPages: totalPages || 0,
+    totalPosts: totalPosts || 0,
+    totalUsers: totalUsers || 0,
+    recentContent: combinedRecent,
+    scheduledContent: processedScheduled
+  };
+}

package/templates/nextblock-template/app/cms/dashboard/page.tsx

@@ -1,7 +1,10 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextblock-cms/ui"
-import { Calendar, FileText, PenTool, Users, ArrowUpRight, ArrowDownRight, Eye } from "lucide-react"
+import { Calendar, FileText, PenTool, Users, Eye } from "lucide-react"
+import { getDashboardStats } from "./actions"
+
+export default async function CmsDashboardPage() {
+  const stats = await getDashboardStats();
 
-export default function CmsDashboardPage() {
   return (
     <div className="w-full space-y-6">
       <div>
@@ -17,13 +20,10 @@ export default function CmsDashboardPage() {
             <FileText className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">24</div>
+            <div className="text-2xl font-bold">{stats.totalPages}</div>
             <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500 font-medium inline-flex items-center">
-                <ArrowUpRight className="h-3 w-3 mr-1" />
-                12%
-              </span>{" "}
-              from last month
+              {/* Trend data would require historical data, keeping static or hiding for now */}
+              <span className="text-muted-foreground opacity-50">Total pages on site</span>
             </p>
           </CardContent>
         </Card>
@@ -34,13 +34,9 @@ export default function CmsDashboardPage() {
             <PenTool className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">142</div>
-            <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500 font-medium inline-flex items-center">
-                <ArrowUpRight className="h-3 w-3 mr-1" />
-                8%
-              </span>{" "}
-              from last month
+            <div className="text-2xl font-bold">{stats.totalPosts}</div>
+             <p className="text-xs text-muted-foreground mt-1">
+              <span className="text-muted-foreground opacity-50">Total blog posts</span>
             </p>
           </CardContent>
         </Card>
@@ -51,30 +47,22 @@ export default function CmsDashboardPage() {
             <Eye className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">8,623</div>
+            <div className="text-2xl font-bold">--</div> {/* Placeholder */}
             <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500 font-medium inline-flex items-center">
-                <ArrowUpRight className="h-3 w-3 mr-1" />
-                24%
-              </span>{" "}
-              from last month
+               Analytics Integration Coming Soon
             </p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
+            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
             <Users className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">573</div>
-            <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-red-500 font-medium inline-flex items-center">
-                <ArrowDownRight className="h-3 w-3 mr-1" />
-                3%
-              </span>{" "}
-              from last month
+            <div className="text-2xl font-bold">{stats.totalUsers}</div>
+             <p className="text-xs text-muted-foreground mt-1">
+              <span className="text-muted-foreground opacity-50">Registered profiles</span>
             </p>
           </CardContent>
         </Card>
@@ -89,30 +77,34 @@ export default function CmsDashboardPage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {recentContent.map((item, index) => (
-                <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
-                  <div
-                    className={`w-8 h-8 rounded-full flex items-center justify-center ${item.type === "page" ? "bg-blue-100 text-blue-600" : "bg-amber-100 text-amber-600"} dark:bg-opacity-20`}
-                  >
-                    {item.type === "page" ? <FileText className="h-4 w-4" /> : <PenTool className="h-4 w-4" />}
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="text-sm font-medium">{item.title}</h4>
-                    <div className="flex items-center gap-2 mt-1">
-                      <p className="text-xs text-muted-foreground">{item.author}</p>
-                      <span className="text-xs text-muted-foreground">•</span>
-                      <p className="text-xs text-muted-foreground">{item.date}</p>
-                    </div>
-                  </div>
-                  <div className="flex items-center">
-                    <span
-                      className={`text-xs px-2 py-1 rounded-full ${item.status === "Published" ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"} dark:bg-opacity-20`}
+              {stats.recentContent.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No recent content found.</p>
+              ) : (
+                stats.recentContent.map((item, index) => (
+                  <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
+                    <div
+                      className={`w-8 h-8 rounded-full flex items-center justify-center ${item.type === "page" ? "bg-blue-100 text-blue-600" : "bg-amber-100 text-amber-600"} dark:bg-opacity-20`}
                     >
-                      {item.status}
-                    </span>
+                      {item.type === "page" ? <FileText className="h-4 w-4" /> : <PenTool className="h-4 w-4" />}
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="text-sm font-medium">{item.title}</h4>
+                      <div className="flex items-center gap-2 mt-1">
+                        <p className="text-xs text-muted-foreground">{item.author}</p>
+                        <span className="text-xs text-muted-foreground">•</span>
+                        <p className="text-xs text-muted-foreground">{item.date}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center">
+                      <span
+                        className={`text-xs px-2 py-1 rounded-full ${item.status === "published" ? "bg-emerald-100 text-emerald-700" : "bg-zinc-100 text-zinc-700"} dark:bg-opacity-20 uppercase`}
+                      >
+                        {item.status}
+                      </span>
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))
+              )}
             </div>
           </CardContent>
         </Card>
@@ -124,26 +116,31 @@ export default function CmsDashboardPage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {scheduledContent.map((item, index) => (
-                <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
-                  <div className="w-10 h-10 rounded bg-slate-100 dark:bg-slate-800 flex flex-col items-center justify-center text-center">
-                    <span className="text-xs font-medium">{item.month}</span>
-                    <span className="text-sm font-bold">{item.day}</span>
-                  </div>
-                  <div className="flex-1">
-                    <h4 className="text-sm font-medium">{item.title}</h4>
-                    <div className="flex items-center gap-2 mt-1">
-                      <Calendar className="h-3 w-3 text-muted-foreground" />
-                      <p className="text-xs text-muted-foreground">{item.time}</p>
+              {stats.scheduledContent.length === 0 ? (
+                 <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+                    <Calendar className="h-8 w-8 mb-2 opacity-20" />
+                    <p>No content scheduled.</p>
+                 </div>
+              ) : (
+                stats.scheduledContent.map((item, index) => (
+                  <div key={index} className="flex items-start gap-4 pb-4 border-b last:border-0 last:pb-0">
+                    <div className="w-10 h-10 rounded bg-slate-100 dark:bg-slate-800 flex flex-col items-center justify-center text-center">
+                      <Calendar className="h-4 w-4 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="text-sm font-medium">{item.title}</h4>
+                      <div className="flex items-center gap-2 mt-1">
+                        <p className="text-xs text-muted-foreground">{item.date}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center">
+                      <span className="text-xs px-2 py-1 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">
+                        {item.type}
+                      </span>
                     </div>
                   </div>
-                  <div className="flex items-center">
-                    <span className="text-xs px-2 py-1 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">
-                      {item.type}
-                    </span>
-                  </div>
-                </div>
-              ))}
+                ))
+              )}
             </div>
           </CardContent>
         </Card>
@@ -153,95 +150,21 @@ export default function CmsDashboardPage() {
       <Card>
         <CardHeader>
           <CardTitle>Traffic Overview</CardTitle>
-          <CardDescription>Page views over the last 30 days</CardDescription>
+          <CardDescription>Page views over the last 30 days (Mock Data)</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="h-[200px] flex items-end gap-2">
-            {analyticsData.map((item, index) => (
-              <div key={index} className="flex-1 flex flex-col items-center">
-                <div
-                  className="w-full bg-primary/10 dark:bg-primary/20 rounded-sm"
-                  style={{ height: `${item.value}%` }}
-                ></div>
-                <span className="text-xs text-muted-foreground mt-2">{item.label}</span>
-              </div>
-            ))}
+          <div className="h-[200px] flex items-end gap-2 align-bottom">
+             {/* Mock chart bars */}
+             {[20, 45, 30, 80, 55, 40, 60, 30, 70, 45, 25, 65, 50, 40].map((h, i) => (
+                <div key={i} className="flex-1 bg-primary/20 hover:bg-primary/40 transition-colors rounded-t-sm relative group" style={{ height: `${h}%` }}>
+                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                        {h * 10} views
+                    </div>
+                </div>
+             ))}
           </div>
         </CardContent>
       </Card>
     </div>
   )
 }
-
-// Sample data
-const recentContent = [
-  {
-    title: "Homepage Redesign",
-    type: "page",
-    author: "John Smith",
-    date: "Today, 2:30 PM",
-    status: "Published",
-  },
-  {
-    title: "New Product Launch",
-    type: "post",
-    author: "Sarah Johnson",
-    date: "Yesterday, 10:15 AM",
-    status: "Published",
-  },
-  {
-    title: "Q2 Marketing Strategy",
-    type: "post",
-    author: "Michael Brown",
-    date: "May 12, 2023",
-    status: "Draft",
-  },
-  {
-    title: "About Us Page",
-    type: "page",
-    author: "John Smith",
-    date: "May 10, 2023",
-    status: "Published",
-  },
-]
-
-const scheduledContent = [
-  {
-    title: "Summer Sale Announcement",
-    month: "May",
-    day: "20",
-    time: "9:00 AM",
-    type: "Post",
-  },
-  {
-    title: "New Feature Release",
-    month: "May",
-    day: "22",
-    time: "12:00 PM",
-    type: "Page",
-  },
-  {
-    title: "Customer Testimonials",
-    month: "May",
-    day: "25",
-    time: "3:30 PM",
-    type: "Post",
-  },
-  {
-    title: "Team Page Update",
-    month: "May",
-    day: "28",
-    time: "10:00 AM",
-    type: "Page",
-  },
-]
-
-const analyticsData = [
-  { label: "1", value: 20 },
-  { label: "5", value: 40 },
-  { label: "10", value: 35 },
-  { label: "15", value: 50 },
-  { label: "20", value: 30 },
-  { label: "25", value: 80 },
-  { label: "30", value: 60 },
-]

package/templates/nextblock-template/app/cms/media/components/MediaEditForm.tsx

@@ -5,11 +5,13 @@ import React, { useState, useTransition, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import { Button } from '@nextblock-cms/ui';
+import { Spinner, Alert, AlertDescription } from '@nextblock-cms/ui';
 import { Input } from '@nextblock-cms/ui';
 import { Label } from '@nextblock-cms/ui';
 import { Textarea } from '@nextblock-cms/ui';
 import type { Database } from '@nextblock-cms/db';
 import { useAuth } from '@/context/AuthContext';
+import { useHotkeys } from '@/hooks/use-hotkeys';
 
 type Media = Database['public']['Tables']['media']['Row'];
 import { FileText } from 'lucide-react';
@@ -74,6 +76,9 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
     return <div>Access Denied. You do not have permission to edit media.</div>;
   }
 
+  const formRef = React.useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
       <div className="md:col-span-1 space-y-4">
@@ -101,17 +106,11 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
         </div>
       </div>
 
-      <form onSubmit={handleSubmit} className="md:col-span-2 space-y-6">
+      <form ref={formRef} onSubmit={handleSubmit} className="md:col-span-2 space-y-6">
         {formMessage && (
-          <div
-            className={`p-3 rounded-md text-sm ${
-              formMessage.type === 'success'
-                ? 'bg-green-100 text-green-700 border border-green-200'
-                : 'bg-red-100 text-red-700 border border-red-200'
-            }`}
-          >
-            {formMessage.text}
-          </div>
+          <Alert variant={formMessage.type === 'success' ? 'success' : 'destructive'} className="mb-4">
+             <AlertDescription>{formMessage.text}</AlertDescription>
+          </Alert>
         )}
         <div>
           <Label htmlFor="file_name">Display Name</Label>
@@ -148,7 +147,13 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
             Cancel
           </Button>
           <Button type="submit" disabled={isPending || authLoading}>
-            {isPending ? "Saving..." : "Update Media Info"}
+            {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            "Update Media Info"
+          )}
           </Button>
         </div>
       </form>

package/templates/nextblock-template/app/cms/media/components/MediaUploadForm.tsx

@@ -4,6 +4,7 @@
 import React, { useState, useRef, useTransition, useEffect } from "react";
 import Image from "next/image";
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
 import { Progress } from "@nextblock-cms/ui"; // Assuming you have this shadcn/ui component
@@ -329,19 +330,21 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
           <Progress value={uploadProgress} className="w-full h-2" />
         )}
         {uploadStatus === "success" && (
-          <div className="flex items-center text-green-600">
-            <CheckCircle2 className="h-5 w-5 mr-2" />
-            <p>Upload successful!</p>
-          </div>
+         <Alert variant="success" className="mb-4">
+            <CheckCircle2 className="h-4 w-4" />
+            <AlertDescription>Upload successful!</AlertDescription>
+         </Alert>
         )}
         {uploadStatus === "error" && errorMessage && (
-          <div className="flex items-center text-red-600">
-            <XCircle className="h-5 w-5 mr-2" />
-            <p>Error: {errorMessage}</p>
-          </div>
+          <Alert variant="destructive" className="mb-4">
+            <XCircle className="h-4 w-4" />
+            <AlertDescription>Error: {errorMessage}</AlertDescription>
+          </Alert>
         )}
         {processingStatus === "processing" && (
-          <p className="text-sm text-blue-600 animate-pulse">Processing image variants...</p>
+          <div className="flex items-center text-sm text-blue-600 animate-pulse">
+             <Spinner className="mr-2 h-4 w-4" /> Processing image variants...
+          </div>
         )}
         {/* Message for when original uploads but variants fail, errorMessage will be set */}
 
@@ -352,9 +355,17 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
           disabled={isPending || uploadStatus === "uploading" || processingStatus === "processing" || !file}
           className="w-full sm:w-auto"
         >
-          {uploadStatus === "uploading" ? `Uploading ${uploadProgress}%...`
-           : processingStatus === "processing" ? "Processing..."
-           : "Upload File"}
+          {uploadStatus === "uploading" ? (
+             <>
+               <Spinner className="mr-2 h-4 w-4" /> Uploading {uploadProgress}%...
+             </>
+           ) : processingStatus === "processing" ? (
+             <>
+               <Spinner className="mr-2 h-4 w-4" /> Processing...
+             </>
+           ) : (
+             "Upload File"
+           )}
         </Button>
       </form>
     </div>

package/templates/nextblock-template/app/cms/navigation/components/DeleteNavItemButton.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { toast } from "react-hot-toast";
 import { Trash2 } from "lucide-react";
 import { deleteNavigationItem } from "../actions";
 import { ConfirmationModal } from "../../components/ConfirmationModal";
@@ -17,12 +18,15 @@ export default function DeleteNavItemButton({ itemId }: DeleteNavItemButtonProps
     try {
       const result = await deleteNavigationItem(itemId);
       if (result.success) {
+        toast.success("Item deleted");
         window.location.reload();
       } else {
         console.error("Delete operation failed:", result.error);
+        toast.error(`Delete failed: ${result.error}`);
       }
     } catch (error) {
       console.error("Exception during delete action:", error);
+      toast.error("An unexpected error occurred.");
     } finally {
       setIsModalOpen(false);
     }

package/templates/nextblock-template/app/cms/navigation/components/NavigationItemForm.tsx

@@ -4,6 +4,8 @@
 import React, { useEffect, useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@nextblock-cms/ui";
+import { Info } from "lucide-react";
 import { Input } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
 import {
@@ -15,6 +17,7 @@ import {
 } from "@nextblock-cms/ui";
 import type { Database } from "@nextblock-cms/db";
 import { useAuth } from "@/context/AuthContext";
+import { useHotkeys } from "@/hooks/use-hotkeys";
 
 type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
 type MenuLocation = Database['public']['Enums']['menu_location'];
@@ -135,12 +138,15 @@ export default function NavigationItemForm({
 
   const menuLocations: MenuLocation[] = ['HEADER', 'FOOTER', 'SIDEBAR'];
 
+  const formRef = React.useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
       {formMessage && (
-        <div className={`p-3 rounded-md text-sm ${formMessage.type === 'success' ? 'bg-green-100 text-green-700 border border-green-200' : 'bg-red-100 text-red-700 border border-red-200'}`}>
-          {formMessage.text}
-        </div>
+        <Alert variant={formMessage.type === 'success' ? 'success' : 'destructive'}>
+           <AlertDescription>{formMessage.text}</AlertDescription>
+        </Alert>
       )}
 
       {/* Hidden input for from_translation_group_id if present in URL params and not editing */}
@@ -198,7 +204,19 @@ export default function NavigationItemForm({
         </Select>
       </div>
       <div>
-        <Label htmlFor="menu_key">Menu Location</Label>
+        <div className="flex items-center gap-2 mb-2">
+            <Label htmlFor="menu_key">Menu Location</Label>
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Info className="h-4 w-4 text-muted-foreground opacity-70 cursor-pointer" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>Where this item will appear in the site layout.</p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </div>
         <Select
             name="menu_key"
             value={menuKey}
@@ -240,7 +258,13 @@ export default function NavigationItemForm({
       <div className="flex justify-end space-x-3">
         <Button type="button" variant="outline" onClick={() => router.push("/cms/navigation")} disabled={isPending}>Cancel</Button>
         <Button type="submit" disabled={isPending || dataLoading || !languageId || !menuKey}>
-          {isPending ? "Saving..." : actionButtonText}
+          {isPending ? (
+             <>
+               <Spinner className="mr-2 h-4 w-4" /> Saving...
+             </>
+           ) : (
+             actionButtonText
+           )}
         </Button>
       </div>
     </form>