Improve UI for sample images when there are no samples

ui/src/components/SampleImages.tsx

@@ -3,6 +3,7 @@ import useSampleImages from '@/hooks/useSampleImages';
 import SampleImageCard from './SampleImageCard';
 import { Job } from '@prisma/client';
 import { JobConfig } from '@/types';
+import { LuImageOff, LuLoader, LuBan } from 'react-icons/lu';
 
 interface SampleImagesProps {
   job: Job;
@@ -23,6 +24,58 @@ export default function SampleImages({ job }: SampleImagesProps) {
     return 10;
   }, [job]);
 
+  const PageInfoContent = useMemo(() => {
+    let icon = null;
+    let text = '';
+    let subtitle = '';
+    let showIt = false;
+    let bgColor = '';
+    let textColor = '';
+    let iconColor = '';
+
+    if (sampleImages.length > 0) return null;
+
+    if (status == 'loading') {
+      icon = <LuLoader className="animate-spin w-8 h-8" />;
+      text = 'Loading Samples';
+      subtitle = 'Please wait while we fetch your samples...';
+      showIt = true;
+      bgColor = 'bg-gray-50 dark:bg-gray-800/50';
+      textColor = 'text-gray-900 dark:text-gray-100';
+      iconColor = 'text-gray-500 dark:text-gray-400';
+    }
+    if (status == 'error') {
+      icon = <LuBan className="w-8 h-8" />;
+      text = 'Error Loading Samples';
+      subtitle = 'There was a problem fetching the samples.';
+      showIt = true;
+      bgColor = 'bg-red-50 dark:bg-red-950/20';
+      textColor = 'text-red-900 dark:text-red-100';
+      iconColor = 'text-red-600 dark:text-red-400';
+    }
+    if (status == 'success' && sampleImages.length === 0) {
+      icon = <LuImageOff className="w-8 h-8" />;
+      text = 'No Samples Found';
+      subtitle = 'No samples have been generated yet';
+      showIt = true;
+      bgColor = 'bg-gray-50 dark:bg-gray-800/50';
+      textColor = 'text-gray-900 dark:text-gray-100';
+      iconColor = 'text-gray-500 dark:text-gray-400';
+    }
+
+    if (!showIt) return null;
+
+    return (
+      <div
+        className={`mt-10 flex flex-col items-center justify-center py-16 px-8 rounded-xl border-2 border-gray-700 border-dashed ${bgColor} ${textColor} mx-auto max-w-md text-center`}
+      >
+        <div className={`${iconColor} mb-4`}>{icon}</div>
+        <h3 className="text-lg font-semibold mb-2">{text}</h3>
+        <p className="text-sm opacity-75 leading-relaxed">{subtitle}</p>
+      </div>
+    );
+  }, [status, sampleImages.length]);
+
   // Use direct Tailwind class without string interpolation
   // This way Tailwind can properly generate the class
   // I hate this, but it's the only way to make it work
@@ -118,8 +171,7 @@ export default function SampleImages({ job }: SampleImagesProps) {
   return (
     <div>
       <div className="pb-4">
-        {status === 'loading' && sampleImages.length === 0 && <p>Loading...</p>}
+        {PageInfoContent}
-        {status === 'error' && <p>Error fetching sample images</p>}
         {sampleImages && (
           <div className={`grid ${gridColsClass} gap-1`}>
             {sampleImages.map((sample: string) => (