From 5f3801debb260f2b797b37e0a043e02a5026af0c Mon Sep 17 00:00:00 2001
From: Simon Schiller <sschiller@spotify.com>
Date: Thu, 2 Jun 2022 18:39:23 +0200
Subject: [PATCH] Optimize HTML's Breakdown performance

Signed-off-by: baebae33 <baebae233333@gmail.com>
---
 buildSrc/src/main/kotlin/Dependencies.kt      |  2 ++
 ruler-frontend/build.gradle.kts               |  1 +
 .../ruler/frontend/components/Breakdown.kt    | 22 +++++++++++++++++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/buildSrc/src/main/kotlin/Dependencies.kt b/buildSrc/src/main/kotlin/Dependencies.kt
index 05a0e5a8..67344891 100644
--- a/buildSrc/src/main/kotlin/Dependencies.kt
+++ b/buildSrc/src/main/kotlin/Dependencies.kt
@@ -44,6 +44,7 @@ object Dependencies {
     const val KOTLIN_REACT = "org.jetbrains.kotlin-wrappers:kotlin-react:${Versions.KOTLIN_REACT}"
     const val KOTLIN_REACT_DOM = "org.jetbrains.kotlin-wrappers:kotlin-react-dom-legacy:${Versions.KOTLIN_REACT}"
     const val KOTLIN_REACT_ROUTER = "org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:${Versions.KOTLIN_REACT_ROUTER}"
+    const val KOTLIN_REACT_VIRTUAL = "org.jetbrains.kotlin-wrappers:kotlin-react-virtual:${Versions.KOTLIN_REACT_VIRTUAL}"
     const val KOTLIN_JS_EXTENSIONS = "org.jetbrains.kotlin-wrappers:kotlin-extensions:${Versions.KOTLIN_JS_EXTENSIONS}"
     const val KOTLIN_REACT_FUNCTION = "com.bnorm.react:kotlin-react-function:${Versions.KOTLIN_REACT_FUNCTION}"
 
@@ -76,6 +77,7 @@ object Dependencies {
 
         const val KOTLIN_REACT = "18.0.0-pre.330-kotlin-1.6.20" // https://mvnrepository.com/artifact/org.jetbrains.kotlin-wrappers/kotlin-react
         const val KOTLIN_REACT_ROUTER = "6.3.0-pre.330-kotlin-1.6.20" // https://mvnrepository.com/artifact/org.jetbrains.kotlin-wrappers/kotlin-react-router-dom
+        const val KOTLIN_REACT_VIRTUAL = "2.10.4-pre.330-kotlin-1.6.20" // https://mvnrepository.com/artifact/org.jetbrains.kotlin-wrappers/kotlin-react-virtual
         const val KOTLIN_JS_EXTENSIONS = "1.0.1-pre.330-kotlin-1.6.20" // https://mvnrepository.com/artifact/org.jetbrains.kotlin-wrappers/kotlin-extensions
 
         const val SELENIUM_WEBDRIVER = "4.1.3" // https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java
diff --git a/ruler-frontend/build.gradle.kts b/ruler-frontend/build.gradle.kts
index 7a8ccd78..9412b639 100644
--- a/ruler-frontend/build.gradle.kts
+++ b/ruler-frontend/build.gradle.kts
@@ -40,6 +40,7 @@ dependencies {
     implementation(Dependencies.KOTLIN_JS_EXTENSIONS)
     implementation(Dependencies.KOTLIN_REACT_FUNCTION)
     implementation(Dependencies.KOTLINX_SERIALIZATION_JSON)
+    implementation(Dependencies.KOTLIN_REACT_VIRTUAL)
 
     implementation(npm(Dependencies.REACT, Dependencies.Versions.REACT))
     implementation(npm(Dependencies.REACT_DOM, Dependencies.Versions.REACT))
diff --git a/ruler-frontend/src/main/kotlin/com/spotify/ruler/frontend/components/Breakdown.kt b/ruler-frontend/src/main/kotlin/com/spotify/ruler/frontend/components/Breakdown.kt
index d35a4224..1b155cf8 100644
--- a/ruler-frontend/src/main/kotlin/com/spotify/ruler/frontend/components/Breakdown.kt
+++ b/ruler-frontend/src/main/kotlin/com/spotify/ruler/frontend/components/Breakdown.kt
@@ -23,12 +23,16 @@ import com.spotify.ruler.models.AppComponent
 import com.spotify.ruler.models.AppFile
 import com.spotify.ruler.models.Measurable
 import kotlinx.html.id
+import org.w3c.dom.HTMLElement
 import react.RBuilder
 import react.dom.button
 import react.dom.div
 import react.dom.h2
 import react.dom.h4
 import react.dom.span
+import react.useRef
+import react.virtual.VirtualOptions
+import react.virtual.useVirtual
 
 @RFunction
 fun RBuilder.breakdown(components: List<AppComponent>, sizeType: Measurable.SizeType) {
@@ -40,9 +44,23 @@ fun RBuilder.breakdown(components: List<AppComponent>, sizeType: Measurable.Size
 
 @RFunction
 fun RBuilder.componentList(components: List<AppComponent>, sizeType: Measurable.SizeType) {
+    val useRef = useRef<HTMLElement>()
+    val virtualOptions: VirtualOptions<HTMLElement> = js("{}")
+    val virtual = useVirtual(
+        options = virtualOptions.apply {
+            size = components.size
+            parentRef = useRef
+        }
+    )
     div(classes = "accordion") {
-        components.forEachIndexed { index, component ->
-            componentListItem(index, component, sizeType, component.name)
+        ref = useRef
+        virtual.virtualItems.forEachIndexed { index, virtualItem ->
+            componentListItem(
+                virtualItem.index,
+                components[index],
+                sizeType,
+                components[index].name
+            )
         }
     }
 }