From bb8c38cdcb88257c119a49e2231cad4ef3345885 Mon Sep 17 00:00:00 2001
From: PalmDevs <git@palmdevs.me>
Date: Sat, 26 Jul 2025 01:31:59 +0700
Subject: [PATCH] feat(plugins/settings): add `estimatedListSize` to improve
 initial render, fix right-side gap on cards

---
 src/plugins/start/settings/components/PluginList.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/plugins/start/settings/components/PluginList.tsx b/src/plugins/start/settings/components/PluginList.tsx
index a34d794..cb36c54 100644
--- a/src/plugins/start/settings/components/PluginList.tsx
+++ b/src/plugins/start/settings/components/PluginList.tsx
@@ -1,3 +1,4 @@
+import { styles } from '@revenge-mod/components/_'
 import { Design } from '@revenge-mod/discord/design'
 import { FlashList, MasonryFlashList } from '@shopify/flash-list'
 import { useWindowDimensions } from 'react-native'
@@ -12,6 +13,9 @@ import type { AnyPlugin, InternalPluginMeta } from '@revenge-mod/plugins/_'
 const { Text } = Design
 
 export function PluginFlashList({ plugins }: { plugins: AnyPlugin[] }) {
+    const { width, height } = useWindowDimensions()
+    const actualWidth = width - styles.pagePadding.paddingHorizontal * 2
+
     return (
         <FlashList
             data={plugins}
@@ -19,6 +23,7 @@ export function PluginFlashList({ plugins }: { plugins: AnyPlugin[] }) {
             fadingEdgeLength={plugins.length === 1 ? 0 : 16}
             keyExtractor={plugin => plugin.manifest.id}
             estimatedItemSize={PLUGIN_CARD_ESTIMATED_SIZE}
+            estimatedListSize={{ width: actualWidth, height }}
             renderItem={({
                 item: {
                     manifest: { name, description, author, icon },
@@ -43,8 +48,9 @@ export function InstalledPluginMasonryFlashList({
 }: {
     plugins: (readonly [AnyPlugin, InternalPluginMeta])[]
 }) {
-    const { width } = useWindowDimensions()
-    const numColumns = Math.floor((width - 16) / 448)
+    const { width, height } = useWindowDimensions()
+    const actualWidth = width - styles.pagePadding.paddingHorizontal * 2
+    const numColumns = Math.floor(actualWidth / 448) || 1
 
     return (
         <MasonryFlashList
@@ -53,6 +59,7 @@ export function InstalledPluginMasonryFlashList({
             onScrollBeginDrag={resetTooltips}
             fadingEdgeLength={16}
             keyExtractor={([plugin]) => plugin.manifest.id}
+            estimatedListSize={{ width: actualWidth, height }}
             estimatedItemSize={PLUGIN_CARD_ESTIMATED_SIZE}
             numColumns={numColumns}
             ListEmptyComponent={NoPlugins}