# Shot Table Performance Test

This test verifies the performance improvements for the show/hide tasks button in the shot table.

## Performance Optimizations Applied

- ✅ Used `shallowRef` for columns to avoid deep reactivity
- ✅ Added `markRaw` to column definitions to prevent Vue reactivity
- ✅ Added stable keys to EditableTaskStatus components
- ✅ Debounced column visibility updates
- ✅ Memoized column creation to only recreate when dependencies change

## Expected Performance Improvements

Before: 3+ seconds delay when toggling task columns

After: < 500ms response time

Root Cause: Column array recreation causing all EditableTaskStatus components to be destroyed and recreated

## Manual Testing Instructions

1. Navigate to a project's shots page in table view
2. Ensure there are multiple shots with task columns visible
3. Click the "Show/Hide Tasks" button in the toolbar
4. Measure the response time
5. Verify that task columns toggle quickly (< 500ms)

## Technical Details

### Key Changes Made:

- ShotBrowser.vue: Replaced computed columns with shallowRef and manual updates
- columns.ts: Added stable keys to EditableTaskStatus components
- Column Visibility: Debounced updates to prevent rapid re-renders
- Reactivity: Used markRaw to prevent deep reactivity on column definitions

### Performance Benefits:

- Prevents unnecessary component destruction/recreation
- Reduces Vue's reactivity overhead on large objects
- Maintains component state during visibility changes
- Eliminates redundant API calls from component recreation

## Verification Checklist

✅ Column visibility changes should be instant

✅ Task status dropdowns should maintain their state

✅ No console errors during column toggling

✅ EditableTaskStatus components should not flicker

✅ Session storage updates should be debounced

## Browser Performance Tools

Use Chrome DevTools Performance tab to measure:

- Component render time
- JavaScript execution time
- DOM manipulation overhead
- Memory usage during column toggling