Add skeleton loading state to template field, remove duplicated or unused code in validate step hooks

docs/validation-hook-refactor.md

@@ -0,0 +1,131 @@
+
+
+# Refactoring Plan for Validation Code
+
+## Current Structure Analysis
+- **useValidationState.tsx**: ~1650 lines - Core validation state management
+- **useValidation.tsx**: ~425 lines - Field/data validation utility
+- **useUpcValidation.tsx**: ~410 lines - UPC-specific validation
+
+## Proposed New Structure
+
+### 1. Core Types & Utilities (150-200 lines)
+**File: `validation/types.ts`**
+- All interfaces and types (RowData, ValidationError, FilterState, Template, etc.)
+- Shared utility functions (isEmpty, getCellKey, etc.)
+
+**File: `validation/utils.ts`**
+- Generic validation utility functions
+- Caching mechanism and cache clearing helpers
+- API URL helpers
+
+### 2. Field Validation (300-350 lines)
+**File: `validation/hooks/useFieldValidation.ts`**
+- `validateField` function
+- Field-level validation logic
+- Required, regex, and other field validations
+
+### 3. Uniqueness Validation (250-300 lines)
+**File: `validation/hooks/useUniquenessValidation.ts`**
+- `validateUniqueField` function
+- `validateUniqueItemNumbers` function
+- All uniqueness checking logic
+
+### 4. UPC Validation (300-350 lines)
+**File: `validation/hooks/useUpcValidation.ts`**
+- `fetchProductByUpc` function
+- `validateUpc` function
+- `applyItemNumbersToData` function
+- UPC validation state management
+
+### 5. Validation Status Management (300-350 lines)
+**File: `validation/hooks/useValidationStatus.ts`**
+- Error state management
+- Row validation status tracking
+- Validation indicators and refs
+- Batch validation processing
+
+### 6. Data Management (300-350 lines)
+**File: `validation/hooks/useValidationData.ts`**
+- Data state management
+- Row updates
+- Data filtering
+- Initial data processing
+
+### 7. Template Management (250-300 lines)
+**File: `validation/hooks/useTemplateManagement.ts`**
+- Template saving
+- Template application
+- Template loading
+- Template display helpers
+
+### 8. Main Validation Hook (300-350 lines)
+**File: `validation/hooks/useValidation.ts`**
+- Main hook that composes all other hooks
+- Public API export
+- Initialization logic
+- Core validation flow
+
+## Function Distribution
+
+### Core Types & Utilities
+- All interfaces (InfoWithSource, ValidationState, etc.)
+- `isEmpty` utility
+- `getApiUrl` helper
+
+### Field Validation
+- `validateField`
+- `validateRow`
+- `validateData` (partial)
+- All validation result caching
+
+### Uniqueness Validation
+- `validateUniqueField`
+- `validateUniqueItemNumbers`
+- Uniqueness caching mechanisms
+
+### UPC Validation
+- `fetchProductByUpc`
+- `validateUpc`
+- `validateAllUPCs`
+- `applyItemNumbersToData`
+- UPC validation state tracking (cells, rows)
+
+### Validation Status Management
+- `startValidatingCell`/`stopValidatingCell`
+- `startValidatingRow`/`stopValidatingRow`
+- `isValidatingCell`/`isRowValidatingUpc`
+- Error state management
+- `revalidateRows`
+
+### Data Management
+- Initial data cleaning/processing
+- `updateRow`
+- `copyDown`
+- Search/filter functionality
+- `filteredData` calculation
+
+### Template Management
+- `saveTemplate`
+- `applyTemplate`
+- `applyTemplateToSelected`
+- `getTemplateDisplayText`
+- `loadTemplates`/`refreshTemplates`
+
+### Main Validation Hook
+- Composition of all other hooks
+- Initialization logic
+- Button/navigation handling
+- Field options management
+
+## Implementation Approach
+
+1. **Start with Types**: Create the types file first, as all other files will depend on it
+2. **Create Utility Functions**: Move shared utilities next
+3. **Build Core Validation**: Extract the field validation and uniqueness validation
+4. **Separate UPC Logic**: Move all UPC-specific code to its own module
+5. **Extract State Management**: Move data and status management to separate files
+6. **Move Template Logic**: Extract template functionality
+7. **Create Composition Hook**: Build the main hook that uses all other hooks
+
+This approach will give you more maintainable code with clearer separation of concerns, making it easier to understand, test, and modify each component independently.