From 6627e68fa4feb3e9dd2067daf233f514584134d9 Mon Sep 17 00:00:00 2001
From: Patric Stout <github@truebrain.nl>
Date: Fri, 17 May 2024 21:01:22 +0200
Subject: [PATCH] chore: preload module/charge from listing, to always show
 drag/drop image (#126)

Drag&drop need the image the be preloaded in order to render it. Browsers
cannot fetch the image while dragging.
---
 src/components/HardwareListing/HardwareListing.tsx | 14 +++++++++++++-
 src/components/TreeListing/TreeListing.tsx         |  2 ++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/HardwareListing/HardwareListing.tsx b/src/components/HardwareListing/HardwareListing.tsx
index d612aa6..32fe86c 100644
--- a/src/components/HardwareListing/HardwareListing.tsx
+++ b/src/components/HardwareListing/HardwareListing.tsx
@@ -59,6 +59,16 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
     [],
   );
 
+  const preloadImage = React.useCallback(
+    (typeId: number): ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) => {
+      return () => {
+        const img = new Image();
+        img.src = `https://images.evetech.net/types/${typeId}/icon?size=64`;
+      };
+    },
+    [],
+  );
+
   const getChildren = React.useCallback(() => {
     return (
       <>
@@ -73,6 +83,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
                   content={item.name}
                   onDoubleClick={() => shipSnapShot.addCharge(item.typeId)}
                   onDragStart={onItemDragStart(item.typeId, "charge")}
+                  onMouseEnter={preloadImage(item.typeId)}
                 />
               );
             } else {
@@ -84,6 +95,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
                   content={item.name}
                   onDoubleClick={() => shipSnapShot.addModule(item.typeId, slotType)}
                   onDragStart={onItemDragStart(item.typeId, slotType)}
+                  onMouseEnter={preloadImage(item.typeId)}
                 />
               );
             }
@@ -99,7 +111,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
           })}
       </>
     );
-  }, [props, shipSnapShot, onItemDragStart]);
+  }, [props, shipSnapShot, onItemDragStart, preloadImage]);
 
   if (props.hideGroup) {
     return <TreeListing level={props.level} getChildren={getChildren} />;
diff --git a/src/components/TreeListing/TreeListing.tsx b/src/components/TreeListing/TreeListing.tsx
index 19a5825..fd25494 100644
--- a/src/components/TreeListing/TreeListing.tsx
+++ b/src/components/TreeListing/TreeListing.tsx
@@ -55,6 +55,7 @@ export const TreeLeaf = (props: {
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   onDoubleClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }) => {
   const stylesHeader = styles[`header${props.level}`];
 
@@ -74,6 +75,7 @@ export const TreeLeaf = (props: {
           onDoubleClick={props.onDoubleClick}
           draggable={!!props.onDragStart}
           onDragStart={props.onDragStart}
+          onMouseEnter={props.onMouseEnter}
         >
           {props.icon !== undefined && (
             <span className={styles.leafIcon}>