Improvements in performance

components/home/EntitySpan/EntitySpan.module.css

@@ -1,9 +1,15 @@
 .span {
-    background: #DDD;
+    background: lightgray;
     font-size: 1em;
     border: 1px solid white;
     display: inline-block;
     position: relative;
+    padding-inline: 0.2em;
+    border-radius: 4px;
+}
+
+.spanSimple {
+    padding-inline-start: 0.2em;
 }
 
 .tooltip {
@@ -24,7 +30,7 @@
     z-index: 1;
 }
 
-.span:hover > .tooltip {
+.span:is(:focus, :hover) > .tooltip {
     display: initial;
 }
 
@@ -49,6 +55,18 @@
     transform: translateY(0.1em);
 }
 
+.base {
+    color: darkgreen;
+}
+
+.produced {
+    color: darkgoldenrod;
+}
+
+.unknown {
+    color: inherit;
+}
+
 .strong {
     font-weight: 600;
     margin-block: 1em 0.4em;
@@ -71,3 +89,26 @@
 .clickBtn {
     fill: red;
 }
+
+@media (prefers-color-scheme: dark) {
+    .span {
+        border-color: #111111;
+        background-color: #444;
+    }
+
+    .base {
+        color: lightgreen;
+    }
+
+    .produced {
+        color: lightsalmon;
+    }
+
+    .unknown {
+        color: lightgray;
+    }
+
+    .tooltip {
+        --background: darkred;
+    }
+}

components/home/EntitySpan/EntitySpan.tsx

@@ -1,33 +1,36 @@
-import {FC, HTMLProps, useMemo} from "react"
+import {FC, HTMLProps, memo, useMemo} from "react"
 import {Entity} from "../../../src/types"
-import {useDetails} from "../../../src/hooks/useDetails"
+import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntitySpan.module.css'
 import {RecipeSpan} from "../Recipe/Recipe";
 import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
+import cx from 'classnames';
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
   value: Entity|string
+  state?: 'base'|'produced'|'unknown'
   leftClickText?: string
   rightClickText?: string
+  simpleStyle?: boolean
 }
 
-export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...rest}) => {
-  const details = useDetails()
+const EntitySpanUnmemo: FC<Props> = ({value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
+  const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : details.find(detail => detail.href === value) ?? {
+      : findFactory(value) ?? {
         href: value,
         name: value,
         image: value,
         recipe: undefined
       }
-  }, [details, value])
+  }, [findFactory, value])
 
-  return <span className={styles.span} {...rest}>
+  return <span className={simpleStyle ? styles.spanSimple : styles.span} {...rest}>
     {/* eslint-disable-next-line @next/next/no-img-element */}
     <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
-    {entity.name}
+    <span className={styles[state ?? 'unknown']}>{entity.name}</span>
     <div className={styles.tooltip}>
       {entity.recipe && (
         <>
@@ -45,3 +48,5 @@ export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...
     </div>
   </span>
 }
+
+export const EntitySpan = memo(EntitySpanUnmemo)