Jul 14
Implementing an AI Processing Modal to Optimize UX for High-Latency Operations
Background:
As the newly introduced AI image processing features (such as background removal and stylistic transformation) involve complex backend computation, generating results typically requires around 1 minute of wait time. Without clear and strategic visual feedback after uploading an image, users will highly likely assume the web page has frozen or crashed, leading to frustrated repeated clicks or immediate abandonment of the page.Proposed Solution:
Introduce a dedicated "AI Creating..." Smart Progress Modal designed to break down the waiting process and provide visual anchors. This will distract users and significantly lower their perceived wait time.Multi-Step Dynamic Progress Tracker: Instead of a generic, infinite loading spinner, the modal will split the waiting period into perceptible milestones (e.g., [Done] Uploading image -> [In Progress] Detecting outlines... -> [Pending] Applying AI rendering). Dynamically checking off these steps gives the user a sense of continuous progression.Fun Facts / Micro-copy Carousel: Incorporate a lightweight text carousel at the bottom of the modal to display shop announcements, customization tips, or engaging AI-themed copywriting (e.g., "Our AI is painting your masterpiece, just a moment..."). This leverages the reading effect to distract users from counting the seconds.Full-Screen Overlay to Prevent Duplicate Actions: The modal will act as a full-screen mask, temporarily disabling the background canvas and submit buttons to prevent users from re-triggering the action and overloading the server while waiting.
Pending