From 92daf1c4ab4944034e2760db593212946381a631 Mon Sep 17 00:00:00 2001
From: dragoni7 <sdgibson18@outlook.com>
Date: Thu, 19 Sep 2024 20:31:35 -0700
Subject: [PATCH] Fix hover cards freezing

---
 src/components/HoverCard.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/HoverCard.tsx b/src/components/HoverCard.tsx
index 7b20598..6046771 100644
--- a/src/components/HoverCard.tsx
+++ b/src/components/HoverCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { styled, Typography, Box } from '@mui/material';
 import { db } from '../store/db';
 import {
@@ -45,15 +45,14 @@ interface HoverCardProps {
 
 const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
   const [hoverData, setHoverData] = useState<any | null>(null);
+  const [hovered, setHovered] = useState<boolean>(false);
 
-  const handleMouseEnter = async () => {
+  async function getItemData() {
     if (!item) {
-      console.log('No item provided');
       return;
     }
 
     const itemHash = item.itemHash;
-    console.log('Hovering over item with itemHash:', itemHash);
 
     try {
       let fullData;
@@ -120,11 +119,11 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
     } catch (error) {
       console.error('Error fetching item data:', error);
     }
-  };
+  }
 
-  const handleMouseLeave = () => {
-    setHoverData(null);
-  };
+  useEffect(() => {
+    getItemData().catch(console.error);
+  }, []);
 
   const renderEnergyCapacity = (capacity: number) => {
     return (
@@ -205,12 +204,12 @@ const HoverCard: React.FC<HoverCardProps> = ({ item, children }) => {
 
   return (
     <div
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
       style={{ position: 'relative' }}
     >
       {children}
-      {hoverData && (
+      {hovered && hoverData && (
         <FadeIn duration={160}>
           <HoverCardContainer>
             {hoverData.type === 'armorMod' || hoverData.type === 'armorStatMod' ? (