From e2db2d50278c804f476f89516cdbb241d1c37b67 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Fri, 8 Aug 2025 16:14:41 +0100
Subject: [PATCH] Optimize form loading and update product selection UI

Dynamically import ChatDetail, NewChatForm, and ProductSelector components with skeleton loading states for improved performance. Refine product selection logic in promotion forms to show blacklist selector only for 'all' mode and clarify labels and descriptions for better user understanding.
---
 app/dashboard/chats/[id]/page.tsx             | 18 +++++++++++++++-
 app/dashboard/chats/new/page.tsx              | 17 ++++++++++++++-
 .../promotions/EditPromotionForm.tsx          | 21 +++++++------------
 .../dashboard/promotions/NewPromotionForm.tsx | 21 +++++++------------
 public/git-info.json                          |  4 ++--
 5 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/app/dashboard/chats/[id]/page.tsx b/app/dashboard/chats/[id]/page.tsx
index c3af5d0..9e5bee1 100644
--- a/app/dashboard/chats/[id]/page.tsx
+++ b/app/dashboard/chats/[id]/page.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Metadata } from "next";
-import ChatDetail from "@/components/dashboard/ChatDetail";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
 import Dashboard from "@/components/dashboard/dashboard";
 
 export const metadata: Metadata = {
@@ -16,6 +17,21 @@ interface PageProps {
 
 export default async function ChatDetailPage({ params }: PageProps) {
   const { id } = await params;
+  const ChatDetail = dynamic(() => import("@/components/dashboard/ChatDetail"), {
+    loading: () => (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-48" />
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-24" />
+          </div>
+        </div>
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-96 w-full" />
+      </div>
+    )
+  });
   return (
     <Dashboard>
       <ChatDetail chatId={id} />
diff --git a/app/dashboard/chats/new/page.tsx b/app/dashboard/chats/new/page.tsx
index bae11da..03c5723 100644
--- a/app/dashboard/chats/new/page.tsx
+++ b/app/dashboard/chats/new/page.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Metadata, Viewport } from "next";
-import NewChatForm from "@/components/dashboard/NewChatForm";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
 import Dashboard from "@/components/dashboard/dashboard";
 
 export const metadata: Metadata = {
@@ -18,6 +19,20 @@ export const viewport: Viewport = {
 };
 
 export default function NewChatPage() {
+  const NewChatForm = dynamic(() => import("@/components/dashboard/NewChatForm"), {
+    loading: () => (
+      <div className="space-y-4">
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-32 w-full" />
+        <div className="flex gap-2">
+          <Skeleton className="h-9 w-24" />
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </div>
+    )
+  });
   return (
     <Dashboard>
       <div className="container mx-auto py-6 space-y-6">
diff --git a/components/dashboard/promotions/EditPromotionForm.tsx b/components/dashboard/promotions/EditPromotionForm.tsx
index df01694..473b117 100644
--- a/components/dashboard/promotions/EditPromotionForm.tsx
+++ b/components/dashboard/promotions/EditPromotionForm.tsx
@@ -22,7 +22,8 @@ import { Textarea } from '@/components/ui/textarea';
 import { toast } from '@/components/ui/use-toast';
 import { Promotion, PromotionFormData } from '@/lib/types/promotion';
 import { fetchClient } from '@/lib/api';
-import ProductSelector from './ProductSelector';
+import dynamic from 'next/dynamic';
+const ProductSelector = dynamic(() => import('./ProductSelector'));
 
 // Form schema validation with Zod (same as NewPromotionForm)
 const formSchema = z.object({
@@ -350,33 +351,27 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
             )}
           />
 
-          {/* Show blacklist selector for "all" and "exclude_specific" modes */}
-          {(form.watch('applicableProducts') === 'all' || form.watch('applicableProducts') === 'exclude_specific') && (
+          {/* Show blacklist selector only for "all" mode */}
+          {form.watch('applicableProducts') === 'all' && (
             <FormField
               control={form.control}
               name="blacklistedProducts"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="text-sm font-medium">
-                    {form.watch('applicableProducts') === 'all' 
-                      ? 'Exclude Products (Blacklist)' 
-                      : 'Products to Exclude'}
+                    Exclude Products (Blacklist)
                   </FormLabel>
                   <FormControl>
                     <ProductSelector
                       selectedProductIds={field.value}
                       onSelectionChange={field.onChange}
                       placeholder={
-                        form.watch('applicableProducts') === 'all'
-                          ? "Select products to exclude from this promotion..."
-                          : "Select additional products to exclude..."
+                        "Select products to exclude from this promotion..."
                       }
                     />
                   </FormControl>
                   <FormDescription className="text-xs">
-                    {form.watch('applicableProducts') === 'all'
-                      ? 'Select products that should not be eligible for this promotion'
-                      : 'Select products to exclude in addition to those selected above'}
+                    Select products that should not be eligible for this promotion
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -393,7 +388,7 @@ export default function EditPromotionForm({ promotion, onSuccess, onCancel }: Ed
                 <FormItem>
                   <FormLabel className="text-sm font-medium">
                     {form.watch('applicableProducts') === 'specific' 
-                      ? 'Select Specific Products' 
+                      ? 'Eligible Products' 
                       : 'Products to Exclude'}
                   </FormLabel>
                   <FormControl>
diff --git a/components/dashboard/promotions/NewPromotionForm.tsx b/components/dashboard/promotions/NewPromotionForm.tsx
index 4c3f151..715799c 100644
--- a/components/dashboard/promotions/NewPromotionForm.tsx
+++ b/components/dashboard/promotions/NewPromotionForm.tsx
@@ -23,7 +23,8 @@ import { toast } from '@/components/ui/use-toast';
 import { PromotionFormData } from '@/lib/types/promotion';
 import { fetchClient } from '@/lib/api';
 import { DatePicker } from '@/components/ui/date-picker';
-import ProductSelector from './ProductSelector';
+import dynamic from 'next/dynamic';
+const ProductSelector = dynamic(() => import('./ProductSelector'));
 
 // Form schema validation with Zod
 const formSchema = z.object({
@@ -345,33 +346,27 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
             )}
           />
 
-          {/* Show blacklist selector for "all" and "exclude_specific" modes */}
-          {(form.watch('applicableProducts') === 'all' || form.watch('applicableProducts') === 'exclude_specific') && (
+          {/* Show blacklist selector only for "all" mode */}
+          {form.watch('applicableProducts') === 'all' && (
             <FormField
               control={form.control}
               name="blacklistedProducts"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="text-sm font-medium">
-                    {form.watch('applicableProducts') === 'all' 
-                      ? 'Exclude Products (Blacklist)' 
-                      : 'Products to Exclude'}
+                    Exclude Products (Blacklist)
                   </FormLabel>
                   <FormControl>
                     <ProductSelector
                       selectedProductIds={field.value}
                       onSelectionChange={field.onChange}
                       placeholder={
-                        form.watch('applicableProducts') === 'all'
-                          ? "Select products to exclude from this promotion..."
-                          : "Select additional products to exclude..."
+                        "Select products to exclude from this promotion..."
                       }
                     />
                   </FormControl>
                   <FormDescription className="text-xs">
-                    {form.watch('applicableProducts') === 'all'
-                      ? 'Select products that should not be eligible for this promotion'
-                      : 'Select products to exclude in addition to those selected above'}
+                    Select products that should not be eligible for this promotion
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -388,7 +383,7 @@ export default function NewPromotionForm({ onSuccess, onCancel }: NewPromotionFo
                 <FormItem>
                   <FormLabel className="text-sm font-medium">
                     {form.watch('applicableProducts') === 'specific' 
-                      ? 'Select Specific Products' 
+                      ? 'Eligible Products' 
                       : 'Products to Exclude'}
                   </FormLabel>
                   <FormControl>
diff --git a/public/git-info.json b/public/git-info.json
index 8da98fe..b406936 100644
--- a/public/git-info.json
+++ b/public/git-info.json
@@ -1,4 +1,4 @@
 {
-  "commitHash": "4d1c37d",
-  "buildTime": "2025-07-30T14:02:04.518Z"
+  "commitHash": "f19ddc4",
+  "buildTime": "2025-08-07T22:45:52.166Z"
 }
\ No newline at end of file