fix: show item save confirmation with image before closing
- Add savingIndex state to track saving operation - Display success overlay with saved image for 1.5 seconds - Show item name in confirmation message - Prevents modal from closing immediately after save Fixes user complaint about image disappearing too quickly without confirmation
This commit is contained in:
@@ -29,6 +29,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
|
||||
fileInputRef,
|
||||
existingTypes,
|
||||
existingBoxes,
|
||||
savingIndex,
|
||||
startLiveCamera,
|
||||
stopLiveCamera,
|
||||
captureSnapshot,
|
||||
@@ -483,6 +484,27 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success confirmation overlay */}
|
||||
{savingIndex !== null && image && (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 animate-in fade-in duration-200">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-48 h-48 rounded-3xl overflow-hidden border-4 border-green-500 shadow-2xl">
|
||||
<img
|
||||
src={image}
|
||||
alt="Saved item photo"
|
||||
className="w-full h-full object-contain bg-black"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-white text-lg font-normal mb-2">Item saved!</p>
|
||||
<p className="text-secondary text-xs font-normal">
|
||||
{extractedItems[savingIndex]?.Item || extractedItems[savingIndex]?.name || "New item"} added to catalog
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user