Use the first image directly

src/components/ImageCollection.vue

@@ -5,7 +5,7 @@ import { downloadBlob } from '../download.ts';
 import IconPlus from '~icons/octicon/feed-plus-16';
 import IconPlay from '~icons/octicon/play-16';
 
-defineEmits<{
+const emit = defineEmits<{
   selected: [image: HTMLImageElement]
 }>()
 
@@ -16,7 +16,12 @@ function onFileChange(event: Event): void {
   const reader = new FileReader();
   reader.onload = function(event) {
     const image = new Image();
-    image.onload = () => images.value.push(image);
+    image.onload = () => {
+      if (!images.value.length) {
+        emit('selected', image);
+      }
+      images.value.push(image);
+    }
     image.src = event.target!.result as string;
   }
   reader.readAsDataURL(files[0]);
@@ -32,7 +37,11 @@ function onAnimateClick(): void {
   const gif = new FixedGIF({
     workerScript: new URL('gif.js/dist/gif.worker.js', import.meta.url).toString(),
   });
-  images.value.forEach((img) => gif.addFrame(img, { delay: 200 }));
+  const delay = prompt('Delay between frames in milliseconds', '500');
+  if (!delay || isNaN(parseInt(delay))) {
+    return;
+  }
+  images.value.forEach((img) => gif.addFrame(img, { delay: parseInt(delay!) }));
   gif.on('finished', (blob: Blob) => {
     downloadBlob(blob, 'animation.gif')
   });