I have a vue page that has a file upload component. This allows the user to upload a file to server storage then display a thumbnail of the file uploaded for later retrieval.
The upload works fine and the server creates a thumbnail using imagemagick which is displayed on the page, this all works fine.
My problem is that the creation of the thumbnail takes a second or two which means when the file upload is finished the thumbnail isn't available immediately and I get an "image cannot be displayed" placeholder where the thumbnail should be. Refreshing the page shows the thumbnail fine.
I've jerry rigged things by adding a delay which gives the server time to create the thumbnail but it's a bit hit and miss as some files take longer to generate than others and it seems a bit poor for the user to have to wait 500ms or more before their action is complete.
How do I go about improving the user experience?