chore: preload module/charge from listing, to always show drag/drop i…

…mage (#126) Drag&drop need the image the be preloaded in order to render it. Browsers cannot fetch the image while dragging.
EVEShipFit · May 17, 2024 · 6627e68 · 6627e68
1 parent c07ba95
commit 6627e68
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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}>