update 404 page performance

src/components/wobbling-image.tsx

@@ -13,6 +13,26 @@ interface WobblingImageInterface {
   }
 }
 
+interface ImageClipInterface {
+  name: string;
+  src: string;
+  size: number;
+  visible?: boolean;
+}
+
+const ImageClip: React.FC<ImageClipInterface> = ({
+  name, src, size, visible
+}) => (
+  <Image
+    className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", visible ? "opacity-100" : "opacity-0")}
+    alt={name}
+    src={src}
+    width={size}
+    height={size}
+    draggable={false}
+  />
+)
+
 function WobblingImage ({
   images
 }: WobblingImageInterface) {
@@ -128,21 +148,23 @@ function WobblingImage ({
         onMouseDown={(e) => e.preventDefault()}
         onPointerDown={(e) => e.preventDefault()}
       >
-        <Image
+        <ImageClip
-          className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-0" : "opacity-100")}
+          name="idle"
-          alt="clip1"
+          src={images.idle}
-          src={isAware ? (images.aware || images.idle) : images.idle}
+          size={size}
-          width={size}
+          visible={!isPoked && !isAware}
-          height={size}
-          draggable={false}
         />
-        <Image
+        <ImageClip
-          className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-100" : "opacity-0")}
+          name="aware"
-          alt="clip2"
+          src={images.aware || images.idle}
+          size={size}
+          visible={!isPoked && isAware}
+        />
+        <ImageClip
+          name="poked"
           src={images.poked || images.idle}
-          width={size}
+          size={size}
-          height={size}
+          visible={isPoked}
-          draggable={false}
         />
       </div>
     </div>