From 4a0653bf5495a4e4b819d5da60e9fbe9f95a0193 Mon Sep 17 00:00:00 2001
From: SkyratBot <59378654+SkyratBot@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:05:46 +0100
Subject: [PATCH] [MIRROR] Fix lag when viewing ore silo long logs list
 (#26491)

* Fix lag when viewing ore silo long logs list (#81232)

![6OrHcTlN6Z](https://github.com/tgstation/tgstation/assets/137328283/89ed9091-e85b-4032-bae1-19200d5ad10d)

## About The Pull Request

- Logs tab is now using a virtual list that renders only visible
components, thus preventing lag when logs list grows too long. More
about it
[here](https://github.com/tgstation/tgstation/pull/81016#issuecomment-1921765723).
- Minor tweaks to Ore Silo UI to account for new backend changes and TG
style guide.

## Changelog

:cl:
fix: Separated logs list into pages in ore silo UI, thus fixing lag when
logs list grows too long.
/:cl:

* Fix lag when viewing ore silo long logs list

---------

Co-authored-by: Interception&? <137328283+intercepti0n@users.noreply.github.com>
---
 code/modules/mining/machine_silo.dm       |   6 +-
 tgui/packages/tgui/interfaces/OreSilo.tsx | 100 ++++++++++++++--------
 2 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/code/modules/mining/machine_silo.dm b/code/modules/mining/machine_silo.dm
index 59247be2c0a..9320bc01226 100644
--- a/code/modules/mining/machine_silo.dm
+++ b/code/modules/mining/machine_silo.dm
@@ -136,8 +136,8 @@
 				"icon" = icon2base64(icon(initial(parent.icon), initial(parent.icon_state), frame = 1)),
 				"name" = parent.name,
 				"onHold" = !!holds[remote],
-				"location" = get_area_name(parent, TRUE)
-				)
+				"location" = get_area_name(parent, TRUE),
+			)
 		)
 
 	data["logs"] = list()
@@ -150,7 +150,7 @@
 				"action" = entry.action,
 				"amount" = entry.amount,
 				"time" = entry.timestamp,
-				"noun" = entry.noun
+				"noun" = entry.noun,
 			)
 		)
 
diff --git a/tgui/packages/tgui/interfaces/OreSilo.tsx b/tgui/packages/tgui/interfaces/OreSilo.tsx
index b1efafc8fa8..6c71a357beb 100644
--- a/tgui/packages/tgui/interfaces/OreSilo.tsx
+++ b/tgui/packages/tgui/interfaces/OreSilo.tsx
@@ -13,6 +13,7 @@ import {
   Stack,
   Tabs,
   Tooltip,
+  VirtualList,
 } from '../components';
 import { Window } from '../layouts';
 import { MaterialAccessBar } from './Fabrication/MaterialAccessBar';
@@ -35,7 +36,12 @@ type Log = {
   noun: string;
 };
 
-type OreSiloData = {
+enum Tab {
+  Machines,
+  Logs,
+}
+
+type Data = {
   SHEET_MATERIAL_AMOUNT: number;
   materials: Material[];
   machines: Machine[];
@@ -43,10 +49,10 @@ type OreSiloData = {
 };
 
 export const OreSilo = (props: any) => {
-  const { act, data } = useBackend<OreSiloData>();
+  const { act, data } = useBackend<Data>();
   const { SHEET_MATERIAL_AMOUNT, machines, logs } = data;
 
-  const [currentTab, setCurrentTab] = useState(0);
+  const [currentTab, setCurrentTab] = useState<Tab>(Tab.Logs);
 
   return (
     <Window title="Ore Silo" width={620} height={600}>
@@ -56,48 +62,29 @@ export const OreSilo = (props: any) => {
             <Tabs fluid>
               <Tabs.Tab
                 icon="plug"
-                selected={currentTab === 0}
-                onClick={() => setCurrentTab(0)}
+                selected={currentTab === Tab.Machines}
+                onClick={() => setCurrentTab(Tab.Machines)}
               >
                 Connections
               </Tabs.Tab>
               <Tabs.Tab
                 icon="book-bookmark"
-                selected={currentTab === 1}
-                onClick={() => setCurrentTab(1)}
+                selected={currentTab === Tab.Logs}
+                onClick={() => setCurrentTab(Tab.Logs)}
               >
                 Logs
               </Tabs.Tab>
             </Tabs>
           </Stack.Item>
           <Stack.Item grow>
-            {currentTab === 0 ? (
-              !!machines && machines.length > 0 ? (
-                <Section fill scrollable>
-                  {machines.map((machine, index) => (
-                    <MachineDisplay
-                      key={index}
-                      machine={machine}
-                      onPause={() => act('hold', { id: index + 1 })}
-                      onRemove={() => act('remove', { id: index + 1 })}
-                    />
-                  ))}
-                </Section>
-              ) : (
-                <NoticeBox>No machines connected!</NoticeBox>
-              )
-            ) : null}
-            {currentTab === 1 ? (
-              !!logs && logs.length > 0 ? (
-                <Box pr={1} height="100%" overflowY="scroll">
-                  {logs.map((log, index) => (
-                    <LogEntry key={index} log={log} />
-                  ))}
-                </Box>
-              ) : (
-                <NoticeBox>No log entries currently present!</NoticeBox>
-              )
+            {currentTab === Tab.Machines ? (
+              <MachineList
+                machines={machines!}
+                onPause={(index) => act('hold', { id: index })}
+                onRemove={(index) => act('remove', { id: index })}
+              />
             ) : null}
+            {currentTab === Tab.Logs ? <LogsList logs={logs!} /> : null}
           </Stack.Item>
           <Stack.Item>
             <Section fill>
@@ -116,6 +103,31 @@ export const OreSilo = (props: any) => {
   );
 };
 
+type MachineListProps = {
+  machines: Machine[];
+  onPause: (index: number) => void;
+  onRemove: (index: number) => void;
+};
+
+const MachineList = (props: MachineListProps) => {
+  const { machines, onPause, onRemove } = props;
+
+  return machines.length > 0 ? (
+    <Section fill scrollable>
+      {machines.map((machine, index) => (
+        <MachineDisplay
+          key={index}
+          machine={machine}
+          onPause={() => onPause(index + 1)}
+          onRemove={() => onRemove(index + 1)}
+        />
+      ))}
+    </Section>
+  ) : (
+    <NoticeBox>No machines connected!</NoticeBox>
+  );
+};
+
 type MachineProps = {
   machine: Machine;
   onPause: () => void;
@@ -130,7 +142,7 @@ const MachineDisplay = (props: MachineProps) => {
   if (index >= 0) {
     machineName = machineName.substring(0, index);
   }
-  machineName = `${machineName.trimEnd()}(${machine.location})`;
+  machineName = `${machineName.trimEnd()} (${machine.location})`;
 
   return (
     <Box className="FabricatorRecipe">
@@ -190,6 +202,26 @@ const MachineDisplay = (props: MachineProps) => {
   );
 };
 
+type LogsListProps = {
+  logs: Log[];
+};
+
+const LogsList = (props: LogsListProps) => {
+  const { logs } = props;
+
+  return logs.length > 0 ? (
+    <Box pr={1} height="100%" overflowY="scroll">
+      <VirtualList>
+        {logs.map((log, index) => (
+          <LogEntry key={index} log={log} />
+        ))}
+      </VirtualList>
+    </Box>
+  ) : (
+    <NoticeBox>No log entries currently present!</NoticeBox>
+  );
+};
+
 type LogProps = {
   log: Log;
 };