@elsapiens/cli 0.1.4 → 0.1.5

package/dist/templates/pages/list.ejs

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { cn } from '@elsapiens/utils';
 import { usePageHeader } from '@elsapiens/providers';
@@ -89,7 +89,36 @@ export function <%= pascalName %>ListPage({ className }: <%= pascalName %>ListPa
   const [itemToDelete, setItemToDelete] = useState<<%= pascalName %>Row | null>(null);
 
   // Loading state - set to true when fetching data
-  const [loading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  // Minimum loading time to prevent flickering
+  const [showLoading, setShowLoading] = useState(false);
+  const loadingStartTimeRef = useRef<number | null>(null);
+  const MIN_LOADING_TIME = 300; // milliseconds
+
+  useEffect(() => {
+    if (loading) {
+      // Start loading - record the start time
+      loadingStartTimeRef.current = Date.now();
+      setShowLoading(true);
+    } else if (loadingStartTimeRef.current !== null) {
+      // Loading finished - ensure minimum display time
+      const elapsed = Date.now() - loadingStartTimeRef.current;
+      const remaining = MIN_LOADING_TIME - elapsed;
+
+      if (remaining > 0) {
+        // Keep showing loading for the remaining time
+        const timer = setTimeout(() => {
+          setShowLoading(false);
+          loadingStartTimeRef.current = null;
+        }, remaining);
+        return () => clearTimeout(timer);
+      } else {
+        // Already past minimum time, hide immediately
+        setShowLoading(false);
+        loadingStartTimeRef.current = null;
+      }
+    }
+  }, [loading]);
 
   // Collapsible info state (persisted in localStorage)
   const [isInfoCollapsed, setIsInfoCollapsed] = useState(() => {
@@ -293,7 +322,7 @@ export function <%= pascalName %>ListPage({ className }: <%= pascalName %>ListPa
       key: 'status',
       header: 'Status',
       render: (item: <%= pascalName %>Row) => (
-        <Badge className={cn('text-xs', statusColors[item.status])}>
+        <Badge className={cn(statusColors[item.status])}>
           {statusLabels[item.status]}
         </Badge>
       ),
@@ -408,21 +437,49 @@ export function <%= pascalName %>ListPage({ className }: <%= pascalName %>ListPa
           />
 
           {/* Table */}
-          {loading && paginatedData.length === 0 ? (
-            <div className="el-p-md el-space-y-md">
-              {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="flex items-center el-gap-md">
-                  <Skeleton className="h-8 w-8 rounded" />
-                  <Skeleton className="h-4 w-40 flex-1" />
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-4 w-20" />
-                  <Skeleton className="h-4 w-24" />
-                </div>
-              ))}
+          {showLoading && paginatedData.length === 0 ? (
+            <div className="el-table-aligned" style={{ marginLeft: 'calc(var(--el-table-spacer-width, var(--el-container-px)) * -1)', marginRight: 'calc(var(--el-table-spacer-width, var(--el-container-px)) * -1)', marginBottom: 'calc(var(--el-table-spacer-width, var(--el-container-px)) * -1)', width: 'calc(100% + var(--el-table-spacer-width, var(--el-container-px)) * 2)' }}>
+              <table className="w-full border-collapse el-table">
+                <thead>
+                  <tr className="border-b border-border bg-wisteria-100 dark:bg-wisteria-800">
+                    <th className="p-0 border-none" style={{ width: 'var(--el-table-spacer-width)' }} />
+                    <th className="font-medium text-foreground text-left" style={{ paddingLeft: 0, paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-header-padding-y)', paddingBottom: 'var(--table-header-padding-y)', fontSize: 'var(--table-font-size)' }}>Name</th>
+                    <th className="font-medium text-foreground text-left" style={{ width: '120px', paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-header-padding-y)', paddingBottom: 'var(--table-header-padding-y)', fontSize: 'var(--table-font-size)' }}>Category</th>
+                    <th className="font-medium text-foreground text-left" style={{ width: '100px', paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-header-padding-y)', paddingBottom: 'var(--table-header-padding-y)', fontSize: 'var(--table-font-size)' }}>Status</th>
+                    <th className="font-medium text-foreground text-left" style={{ width: '120px', paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-header-padding-y)', paddingBottom: 'var(--table-header-padding-y)', fontSize: 'var(--table-font-size)' }}>Created</th>
+                    <th style={{ width: '100px', paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 0, paddingTop: 'var(--table-header-padding-y)', paddingBottom: 'var(--table-header-padding-y)' }} />
+                    <th className="p-0 border-none" style={{ width: 'var(--el-table-spacer-width)' }} />
+                  </tr>
+                </thead>
+                <tbody>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <tr key={i} className="border-b border-border">
+                      <td className="p-0 border-none" />
+                      <td style={{ paddingLeft: 0, paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-cell-padding-y)', paddingBottom: 'var(--table-cell-padding-y)' }}>
+                        <div className="flex items-center el-gap-sm">
+                          <Skeleton className="h-8 w-8 rounded flex-shrink-0" />
+                          <Skeleton className="h-4 w-32" />
+                        </div>
+                      </td>
+                      <td style={{ paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-cell-padding-y)', paddingBottom: 'var(--table-cell-padding-y)' }}>
+                        <Skeleton className="h-6 w-20 rounded-full" />
+                      </td>
+                      <td style={{ paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-cell-padding-y)', paddingBottom: 'var(--table-cell-padding-y)' }}>
+                        <Skeleton className="h-6 w-14 rounded-full" />
+                      </td>
+                      <td style={{ paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 'var(--table-cell-padding-x)', paddingTop: 'var(--table-cell-padding-y)', paddingBottom: 'var(--table-cell-padding-y)' }}>
+                        <Skeleton className="h-4 w-20" />
+                      </td>
+                      <td style={{ paddingLeft: 'var(--table-cell-padding-x)', paddingRight: 0, paddingTop: 'var(--table-cell-padding-y)', paddingBottom: 'var(--table-cell-padding-y)' }} />
+                      <td className="p-0 border-none" />
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             </div>
           ) : paginatedData.length === 0 && hasActiveFilters ? (
             /* Filtered empty state - no results for current filters */
-            <div className="flex-1 flex flex-col items-center justify-center el-gap-md el-py-xl">
+            <div className="flex-1 flex flex-col items-center justify-center el-gap-lg el-py-xl">
               <div className="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center">
                 <SearchX className="w-8 h-8 text-muted-foreground" />
               </div>
@@ -432,9 +489,11 @@ export function <%= pascalName %>ListPage({ className }: <%= pascalName %>ListPa
                   No <%= title.toLowerCase() %> match your current filters. Try adjusting your search or filters.
                 </p>
               </div>
-              <Button variant="outline" onClick={clearFilters}>
-                Clear filters
-              </Button>
+              <div className="flex items-center el-gap-field">
+                <Button variant="outline" onClick={clearFilters}>
+                  Clear filters
+                </Button>
+              </div>
             </div>
           ) : paginatedData.length === 0 ? (
             /* True empty state - no data at all */
@@ -495,8 +554,8 @@ export function <%= pascalName %>ListPage({ className }: <%= pascalName %>ListPa
           </div>
         )}
 
-        {/* Collapsible Page Info - shows when items exist */}
-        {paginatedData.length > 0 && (
+        {/* Collapsible Page Info - shows when data exists in the system */}
+        {sampleData.length > 0 && (
           <div className="relative">
             {isInfoCollapsed ? (
               <button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsapiens/cli",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "CLI scaffolding tool for elSapiens SDK projects",
   "type": "module",
   "bin": {