From 063aab85076751ae8b1283ddef1d531a9d4a9cd5 Mon Sep 17 00:00:00 2001
From: Abdelilah El Aissaoui <aeab13@gmail.com>
Date: Tue, 30 Jul 2024 22:26:38 +0200
Subject: [PATCH] Fixed flicker when changing tabs

---
 .../ui/components/TripleVerticalSplitPanel.kt | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt b/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt
index 2dcd046..6974fc3 100644
--- a/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt
+++ b/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt
@@ -3,9 +3,6 @@ package com.jetpackduba.gitnuro.ui.components
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.gestures.draggable
 import androidx.compose.foundation.gestures.rememberDraggableState
-import androidx.compose.foundation.hoverable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -36,27 +33,28 @@ fun TripleVerticalSplitPanel(
     onThirdSizeDragStopped: () -> Unit,
 ) {
     val density = LocalDensity.current.density
-    var screenWidth by remember { mutableStateOf(0) }
-    val screenWidthInDp = remember(screenWidth) { (screenWidth / density) }
 
-    val firstWidthLimited = remember(firstWidth, screenWidthInDp) {
-        calcLimitedWidth(screenWidthInDp, firstWidth)
-    }
+    // The panes width used to be calculated in the remember lambda, but as it required the view to compose once to get
+    // the composable width, it was flickering, so we only update them when size of the parent component changes
+    var firstWidthLimited by remember(firstWidth) { mutableStateOf(firstWidth)}
+    var thirdWidthLimited by remember(thirdWidth) { mutableStateOf(thirdWidth) }
 
-    val thirdWidthLimited = remember(thirdWidth, screenWidthInDp) {
-        calcLimitedWidth(screenWidthInDp, thirdWidth)
+    fun updateMaxPaneWidthToComponentWidth(screenWidth: Int) {
+        val screenWidthInDp = screenWidth /density
+        firstWidthLimited = calcLimitedWidth(screenWidthInDp, firstWidth)
+        thirdWidthLimited = calcLimitedWidth(screenWidthInDp, thirdWidth)
     }
 
     Row(
         modifier = modifier
             .onSizeChanged {
-                screenWidth = it.width
+                updateMaxPaneWidthToComponentWidth(it.width)
             }
     ) {
         if (firstWidth > 0) {
             Box(
                 modifier = Modifier
-                    .width(firstWidthLimited.dp)
+                    .width(firstWidth.dp)
             ) {
                 first()
             }
@@ -108,7 +106,7 @@ fun TripleVerticalSplitPanel(
 
         Box(
             modifier = Modifier
-                .width(thirdWidthLimited.dp)
+                .width(thirdWidth.dp)
         ) {
             third()
         }