From 52fd47a921439ae5c6e486cbc4af472541f7ffb0 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Thu, 6 Mar 2025 13:38:11 -0500
Subject: [PATCH] Fix templates loading on page load

---
 .../components/SearchableTemplateSelect.tsx   |  9 +++++
 .../components/ValidationContainer.tsx        | 24 ++++++++++----
 .../components/ValidationTable.tsx            | 33 ++++++++++++-------
 .../hooks/useValidationState.tsx              |  5 +++
 4 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
index c3f2eaf..cc09e15 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx
@@ -58,6 +58,7 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
     console.debug('SearchableTemplateSelect brand update:', {
       selectedBrand,
       defaultBrand,
+      templatesCount: templates?.length || 0,
       templatesForBrand: templates?.filter(t => t.company === selectedBrand)?.length || 0
     });
   }, [selectedBrand, defaultBrand, templates]);
@@ -69,6 +70,14 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
     }
   }, [defaultBrand]);
   
+  // Force a re-render when templates change from empty to non-empty
+  useEffect(() => {
+    if (templates && templates.length > 0) {
+      // Force a re-render by updating state
+      setSearchTerm("");
+    }
+  }, [templates]);
+  
   // Handle wheel events for scrolling
   const handleWheel = (e: React.WheelEvent) => {
     const scrollArea = e.currentTarget;
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
index 72b5568..c81d35a 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx
@@ -53,7 +53,8 @@ const ValidationContainer = <T extends string>({
     updateFilters,
     loadTemplates,
     setData,
-    fields
+    fields,
+    isLoadingTemplates
   } = validationState
   
   // Add state for tracking product lines and sublines per row
@@ -599,21 +600,25 @@ const ValidationContainer = <T extends string>({
       // Create a new array with the item numbers merged in
       return props.data.map((row: any, index: number) => {
         if (itemNumbers[index]) {
-          return { ...row, item_number: itemNumbers[index] };
+          return {
+            ...row,
+            item_number: itemNumbers[index]
+          };
         }
         return row;
       });
-    }, [props.data]);
+    }, [props.data, itemNumbers]);
     
     return (
-      <ValidationTable 
+      <ValidationTable
         {...props}
         data={enhancedData}
         validatingCells={validatingCells}
         itemNumbers={itemNumbersMap}
+        isLoadingTemplates={isLoadingTemplates}
       />
     );
-  }, [itemNumbers, validatingUpcRows]);
+  }, [validatingUpcRows, itemNumbers, isLoadingTemplates]);
 
   // Memoize the ValidationTable to prevent unnecessary re-renders
   const renderValidationTable = useMemo(() => {
@@ -752,7 +757,12 @@ const ValidationContainer = <T extends string>({
                 </div>
                 
                 <div className="flex items-center">
-                  {templates && templates.length > 0 ? (
+                  {isLoadingTemplates ? (
+                    <Button variant="outline" className="w-[220px] justify-between" disabled>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Loading templates...
+                    </Button>
+                  ) : templates && templates.length > 0 ? (
                     <SearchableTemplateSelect
                       templates={templates}
                       value={selectedTemplateId || ""}
@@ -767,7 +777,7 @@ const ValidationContainer = <T extends string>({
                     />
                   ) : (
                     <Button variant="outline" className="w-full justify-between" disabled>
-                      Loading templates...
+                      No templates available
                     </Button>
                   )}
                 </div>
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
index 54c9307..b645979 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx
@@ -14,6 +14,8 @@ import SearchableTemplateSelect from './SearchableTemplateSelect'
 import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
 import { Checkbox } from '@/components/ui/checkbox'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Loader2 } from 'lucide-react'
 
 // Define a simple Error type locally to avoid import issues
 type ErrorType = {
@@ -42,6 +44,7 @@ interface ValidationTableProps<T extends string> {
   upcValidationResults: Map<number, { itemNumber: string }>
   validatingCells: Set<string>
   itemNumbers: Map<number, string>
+  isLoadingTemplates?: boolean
   [key: string]: any
 }
 
@@ -247,7 +250,8 @@ const ValidationTable = <T extends string>({
   applyTemplate,
   getTemplateDisplayText,
   validatingCells,
-  itemNumbers
+  itemNumbers,
+  isLoadingTemplates = false
 }: ValidationTableProps<T>) => {
   const { translations } = useRsi<T>();
   
@@ -348,19 +352,26 @@ const ValidationTable = <T extends string>({
       const defaultBrand = row.original.company || undefined;
       return (
         <TableCell className="p-1" style={{ width: '200px', minWidth: '200px' }}>
-          <SearchableTemplateSelect
-            templates={templates}
-            value={templateValue || ''}
-            onValueChange={(value) => {
-              applyTemplate(value, [row.index]);
-            }}
-            getTemplateDisplayText={getTemplateDisplayText}
-            defaultBrand={defaultBrand}
-          />
+          {isLoadingTemplates ? (
+            <Button variant="outline" className="w-full justify-between" disabled>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              Loading...
+            </Button>
+          ) : (
+            <SearchableTemplateSelect
+              templates={templates}
+              value={templateValue || ''}
+              onValueChange={(value) => {
+                applyTemplate(value, [row.index]);
+              }}
+              getTemplateDisplayText={getTemplateDisplayText}
+              defaultBrand={defaultBrand}
+            />
+          )}
         </TableCell>
       );
     }
-  }), [templates, applyTemplate, getTemplateDisplayText]);
+  }), [templates, applyTemplate, getTemplateDisplayText, isLoadingTemplates]);
 
   // Memoize field columns
   const fieldColumns = useMemo(() => fields.map((field): ColumnDef<RowData<T>, any> | null => {
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
index fbe34dd..2105054 100644
--- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx
@@ -165,6 +165,7 @@ export const useValidationState = <T extends string>({
   
   // Template state
   const [templates, setTemplates] = useState<Template[]>([])
+  const [isLoadingTemplates, setIsLoadingTemplates] = useState(true)
   const [templateState, setTemplateState] = useState({
     selectedTemplateId: null as string | null,
     showSaveTemplateDialog: false,
@@ -896,6 +897,7 @@ export const useValidationState = <T extends string>({
   // Load templates
   const loadTemplates = useCallback(async () => {
     try {
+      setIsLoadingTemplates(true);
       console.log('Fetching templates from:', `${getApiUrl()}/templates`);
       // Fetch templates from the API
       const response = await fetch(`${getApiUrl()}/templates`)
@@ -935,6 +937,8 @@ export const useValidationState = <T extends string>({
     } catch (error) {
       console.error('Error fetching templates:', error)
       toast.error('Failed to load templates')
+    } finally {
+      setIsLoadingTemplates(false);
     }
   }, [])
   
@@ -1525,6 +1529,7 @@ export const useValidationState = <T extends string>({
     
     // Templates
     templates,
+    isLoadingTemplates,
     selectedTemplateId: templateState.selectedTemplateId,
     showSaveTemplateDialog: templateState.showSaveTemplateDialog,
     newTemplateName: templateState.newTemplateName,