Improvements in performance

components/home/FactorySelect/FactorySelect.module.css

@@ -0,0 +1,23 @@
+@media (prefers-color-scheme: dark) {
+    .select :global(.factory-select__control) {
+        background-color: #222;
+    }
+
+    .select :global(.factory-select__multi-value),
+    .select :global(.factory-select__menu)
+    {
+        background-color: #444;
+    }
+
+    .option {
+        padding: 0.3em;
+    }
+
+    .option:is(:hover, :focus-visible) {
+        background-color: black;
+    }
+
+    .select :global(.factory-select__multi-value__label) {
+        color: #DDDDDD;
+    }
+}

components/home/FactorySelect/FactorySelect.tsx

@@ -1,9 +1,12 @@
-import {FC, useEffect, useState} from "react";
+import {FC, memo, useEffect, useState} from "react";
 import Select from "react-select";
 import {isNonNullable} from "../../../src/utils";
 import details from "../../../res/details.json";
+import styles from "./FactorySelect.module.css";
+import {EntitySpan} from "../EntitySpan/EntitySpan";
 
 interface Props {
+  id: string
   factories: string[]
   onSetFactories: (factories: string[]) => void
 }
@@ -13,7 +16,7 @@ const options = details.map(detail => ({
   value: detail.href
 }))
 
-export const FactorySelect: FC<Props> = ({factories, onSetFactories}) => {
+const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
   const [state, setState] = useState<typeof options>([])
   useEffect(() => {
     setState(factories
@@ -21,13 +24,27 @@ export const FactorySelect: FC<Props> = ({factories, onSetFactories}) => {
       .filter(isNonNullable))
   }, [factories])
 
+  console.log("fddsdfd")
   return <Select
+    id={id}
     value={state}
+    components={{
+      MultiValueLabel: ({data, innerProps}) => (
+        <EntitySpan {...innerProps} value={data.value} simpleStyle={true}/>
+      ),
+      Option: ({innerProps, data}) => (
+        <div {...innerProps} className={styles.option}><EntitySpan value={data.value} simpleStyle={true}/></div>
+      )
+    }}
     isMulti
     options={options as never}
     onChange={e => {
       setState(e as typeof options)
       onSetFactories(e.map(s => s?.value))
     }}
+    className={styles.select}
+    classNamePrefix={"factory-select"}
   />
 }
+
+export const FactorySelect = memo(FactorySelectBase)