Implement virtualized list

.vscode/settings.json

@@ -8,5 +8,13 @@
 		"source.fixAll": true
 	},
 	"emmet.showAbbreviationSuggestions": false,
-	"emmet.excludeLanguages": ["markdown", "typescriptreact"]
+	"emmet.excludeLanguages": ["markdown", "typescriptreact"],
+	"emeraldwalk.runonsave": {
+		"commands": [
+			{
+				"match": ".*",
+				"cmd": "rbxtsc --verbose && rojo build -o \"C:\\Users\\jackc\\AppData\\Local\\Roblox\\Plugins\\ReflexDevTools.rbxm\""
+			}
+		]
+	}
 }

package.json

@@ -36,6 +36,7 @@
 		"@rbxts/inspect": "^1.0.1",
 		"@rbxts/object-utils": "^1.0.4",
 		"@rbxts/pretty-react-hooks": "^0.2.1",
-		"@rbxts/t": "^3.1.0"
+		"@rbxts/t": "^3.1.0",
+		"@rbxts/virtualized-list": "^1.3.2"
 	}
 }

src/app/actionSelection.tsx

@@ -3,7 +3,7 @@ import Roact, { memo, useMemo } from "@rbxts/roact"
 import { useRootProducer } from "store"
 import { Action } from "store/game"
 
-export const ActionSelection = memo((props: { action: Action; index: number; selected: boolean }) => {
+function ActionSelection(props: { action: Action; index: number; selected: boolean }) {
 	const store = useRootProducer()
 
 	const inspectedArgs = useMemo(() => inspect(props.action.args), [props.action])
@@ -23,6 +23,8 @@ export const ActionSelection = memo((props: { action: Action; index: number; sel
 		Enum.StudioStyleGuideColor[props.selected ? "DialogMainButtonText" : "SubText"]
 	)
 
+	print(props.index, "rendered")
+
 	return (
 		<textbutton
 			AutomaticSize={Enum.AutomaticSize.Y}
@@ -35,7 +37,6 @@ export const ActionSelection = memo((props: { action: Action; index: number; sel
 					} else store.deselectedAction()
 				}
 			}}
-			LayoutOrder={0 - props.index}
 			RichText
 			Size={UDim2.fromScale(1, 0)}
 			Text=""
@@ -71,7 +72,7 @@ export const ActionSelection = memo((props: { action: Action; index: number; sel
 				BackgroundTransparency={1}
 				Font={Enum.Font.RobotoMono}
 				LayoutOrder={2}
-				Text={`${formattedTimestamp} • #${props.index}`}
+				Text={`${formattedTimestamp} • #${props.index + 1}`}
 				TextColor3={subTextColor}
 				TextSize={15}
 				TextWrapped
@@ -89,4 +90,6 @@ export const ActionSelection = memo((props: { action: Action; index: number; sel
 			/>
 		</textbutton>
 	)
-})
+}
+
+export = memo(ActionSelection)

src/app/actionState.tsx

@@ -1,8 +1,8 @@
 import Highlighter from "@rbxts/highlighter"
 import inspect from "@rbxts/inspect"
-import Roact, { useBinding, useEffect, useRef } from "@rbxts/roact"
+import Roact, { memo, useBinding, useEffect, useRef } from "@rbxts/roact"
 
-export function ActionState(props: { state: {} }) {
+function ActionState(props: { state: {} }) {
 	const label = useRef<TextLabel>()
 
 	useEffect(() => {
@@ -44,3 +44,5 @@ export function ActionState(props: { state: {} }) {
 		</scrollingframe>
 	)
 }
+
+export = memo(ActionState)

src/app/index.tsx

@@ -1,8 +1,9 @@
 import Highlighter from "@rbxts/highlighter"
-import Roact, { useEffect, useMemo } from "@rbxts/roact"
+import Roact, { useEffect } from "@rbxts/roact"
+import { FlatList } from "@rbxts/virtualized-list"
 import { useRootProducer, useRootSelector } from "store"
-import { ActionSelection } from "./actionSelection"
-import { ActionState } from "./actionState"
+import ActionSelection from "./actionSelection"
+import ActionState from "./actionState"
 
 Highlighter.matchStudioSettings()
 
@@ -17,33 +18,44 @@ export function App() {
 	const selectedAction = selected !== undefined ? actions[selected.index] : undefined
 
 	useEffect(() => {
-		const last = actions.size() - 1
+		const size = actions.size()
+		if (size === 0) return
+
+		const last = size - 1
 		if ((selected && !selected.manual && selected.index !== last) || !selected) {
 			store.selectedAction(last, false)
 		}
 	}, [selected, actions])
 
-	const actionSelections = useMemo(() => {
-		return actions.map((action, index) => (
-			<ActionSelection action={action} index={index} key={index} selected={index === selected?.index} />
-		))
-	}, [actions, selected])
-
 	return (
 		<frame BackgroundTransparency={1} Size={UDim2.fromScale(1, 1)} key="main">
-			<scrollingframe
-				AutomaticCanvasSize={Enum.AutomaticSize.Y}
+			<frame
 				BackgroundTransparency={1}
 				BorderColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.Border)}
-				CanvasSize={new UDim2()}
-				ScrollBarImageColor3={settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.ScrollBar)}
-				ScrollBarThickness={6}
 				Size={UDim2.fromScale(ACTIONS_WIDTH, 1)}
 				key="actions"
 			>
-				{actionSelections}
-				<uilistlayout Padding={new UDim(0, 5)} SortOrder={Enum.SortOrder.LayoutOrder} key="layout" />
-			</scrollingframe>
+				<FlatList
+					contentContainerStyle={{
+						BackgroundTransparency: 1
+					}}
+					data={actions}
+					renderItem={entry => (
+						<ActionSelection
+							action={entry.item}
+							index={entry.index - 1}
+							key={entry.index}
+							selected={entry.index - 1 === selected?.index}
+						/>
+					)}
+					style={{
+						BackgroundTransparency: 1,
+						ScrollBarImageColor3: settings().Studio.Theme.GetColor(Enum.StudioStyleGuideColor.ScrollBar),
+						ScrollBarThickness: 6,
+						BorderSizePixel: 0
+					}}
+				/>
+			</frame>
 			<frame
 				BackgroundTransparency={1}
 				Position={UDim2.fromScale(ACTIONS_WIDTH, 0)}