perf: optimize performance of the rule editor

src/components/profile/rules-editor-viewer.tsx

@@ -35,6 +35,7 @@ import { Notice, Switch } from "@/components/base";
 import getSystem from "@/utils/get-system";
 import { RuleItem } from "@/components/profile/rule-item";
 import { BaseSearchBox } from "../base/base-search-box";
+import { Virtuoso } from "react-virtuoso";
 
 interface Props {
   profileUid: string;
@@ -350,13 +351,13 @@ export const RulesEditorViewer = (props: Props) => {
       <DialogTitle>{title ?? t("Edit Rules")}</DialogTitle>
 
       <DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}>
-        <div
-          style={{
+        <List
+          sx={{
+            height: "calc(100% - 16px)",
             width: "50%",
-            height: "100%",
+            padding: "0 10px",
           }}
         >
-          <List>
           <Item>
             <ListItemText primary={t("Rule Type")} />
             <Autocomplete
@@ -435,7 +436,6 @@ export const RulesEditorViewer = (props: Props) => {
               />
             </Item>
           )}
-          </List>
           <Item>
             <Button
               fullWidth
@@ -443,8 +443,6 @@ export const RulesEditorViewer = (props: Props) => {
               onClick={() => {
                 try {
                   let raw = validateRule();
-                  console.log(raw);
-
                   if (prependSeq.includes(raw)) return;
                   setPrependSeq([...prependSeq, raw]);
                 } catch (err: any) {
@@ -463,7 +461,7 @@ export const RulesEditorViewer = (props: Props) => {
                 try {
                   let raw = validateRule();
                   if (appendSeq.includes(raw)) return;
-                  setPrependSeq([...appendSeq, raw]);
+                  setAppendSeq([...appendSeq, raw]);
                 } catch (err: any) {
                   Notice.error(err.message || err.toString());
                 }
@@ -472,30 +470,32 @@ export const RulesEditorViewer = (props: Props) => {
               {t("Append Rule")}
             </Button>
           </Item>
-        </div>
-        <div
-          style={{
-            display: "inline-block",
-            width: "50%",
-            height: "100%",
-            overflowY: "auto",
-            overflowX: "hidden",
-            padding: "0 10px",
-          }}
+        </List>
+
+        <List
+          sx={{ height: "calc(100% - 16px)", width: "50%", padding: "0 10px" }}
         >
-          <div style={{ position: "sticky", top: 0, zIndex: 10 }}>
           <BaseSearchBox
             matchCase={false}
             onSearch={(match) => setMatch(() => match)}
           />
-          </div>
-          {prependSeq.length > 0 && (
+          <Virtuoso
+            style={{ height: "calc(100% - 16px)", marginTop: "8px" }}
+            totalCount={
+              ruleList.length +
+              (prependSeq.length > 0 ? 1 : 0) +
+              (appendSeq.length > 0 ? 1 : 0)
+            }
+            increaseViewportBy={256}
+            itemContent={(index) => {
+              let shift = prependSeq.length > 0 ? 1 : 0;
+              if (prependSeq.length > 0 && index === 0) {
+                return (
                   <DndContext
                     sensors={sensors}
                     collisionDetection={closestCenter}
                     onDragEnd={onPrependDragEnd}
                   >
-              <List sx={{ borderBottom: "solid 1px var(--divider-color)" }}>
                     <SortableContext
                       items={prependSeq.map((x) => {
                         return x;
@@ -508,38 +508,40 @@ export const RulesEditorViewer = (props: Props) => {
                             type="prepend"
                             ruleRaw={item}
                             onDelete={() => {
-                          setPrependSeq(prependSeq.filter((v) => v !== item));
+                              setPrependSeq(
+                                prependSeq.filter((v) => v !== item)
+                              );
                             }}
                           />
                         );
                       })}
                     </SortableContext>
-              </List>
                   </DndContext>
-          )}
-
-          <List>
-            {ruleList
-              .filter((item) => match(item))
-              .map((item, index) => {
+                );
+              } else if (index < ruleList.length + shift) {
+                let newIndex = index - shift;
                 return (
                   <RuleItem
-                    key={`${item}-${index}`}
-                    type={deleteSeq.includes(item) ? "delete" : "original"}
-                    ruleRaw={item}
+                    key={`${ruleList[newIndex]}-${index}`}
+                    type={
+                      deleteSeq.includes(ruleList[newIndex])
+                        ? "delete"
+                        : "original"
+                    }
+                    ruleRaw={ruleList[newIndex]}
                     onDelete={() => {
-                      if (deleteSeq.includes(item)) {
-                        setDeleteSeq(deleteSeq.filter((v) => v !== item));
+                      if (deleteSeq.includes(ruleList[newIndex])) {
+                        setDeleteSeq(
+                          deleteSeq.filter((v) => v !== ruleList[newIndex])
+                        );
                       } else {
-                        setDeleteSeq([...deleteSeq, item]);
+                        setDeleteSeq((prev) => [...prev, ruleList[newIndex]]);
                       }
                     }}
                   />
                 );
-              })}
-          </List>
-
-          {appendSeq.length > 0 && (
+              } else {
+                return (
                   <DndContext
                     sensors={sensors}
                     collisionDetection={closestCenter}
@@ -550,7 +552,6 @@ export const RulesEditorViewer = (props: Props) => {
                         return x;
                       })}
                     >
-                <List sx={{ borderTop: "solid 1px var(--divider-color)" }}>
                       {appendSeq.map((item, index) => {
                         return (
                           <RuleItem
@@ -563,11 +564,13 @@ export const RulesEditorViewer = (props: Props) => {
                           />
                         );
                       })}
-                </List>
                     </SortableContext>
                   </DndContext>
-          )}
-        </div>
+                );
+              }
+            }}
+          />
+        </List>
       </DialogContent>
 
       <DialogActions>