Add debounce click to prevent double navigations

Author: SimonSchubert

composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/composables/DebouncedClickable.kt

@@ -0,0 +1,36 @@
+package com.linuxcommandlibrary.app.ui.composables
+
+import androidx.compose.foundation.clickable
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import kotlin.time.Duration
+import kotlin.time.Duration.Companion.milliseconds
+import kotlin.time.TimeMark
+import kotlin.time.TimeSource
+
+@Composable
+fun rememberDebouncedClick(
+    debounceTime: Duration = 300.milliseconds,
+    onClick: () -> Unit,
+): () -> Unit {
+    var lastClickMark by remember { mutableStateOf<TimeMark?>(null) }
+    return {
+        val last = lastClickMark
+        if (last == null || last.elapsedNow() >= debounceTime) {
+            lastClickMark = TimeSource.Monotonic.markNow()
+            onClick()
+        }
+    }
+}
+
+fun Modifier.debouncedClickable(
+    debounceTime: Duration = 300.milliseconds,
+    onClick: () -> Unit,
+): Modifier = composed {
+    clickable(onClick = rememberDebouncedClick(debounceTime, onClick))
+}

composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/screens/basiccategories/BasicCategoriesScreen.kt

@@ -1,7 +1,6 @@
 package com.linuxcommandlibrary.app.ui.screens.basiccategories
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -20,6 +19,7 @@ import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
 import com.linuxcommandlibrary.app.NavEvent
 import com.linuxcommandlibrary.app.ui.composables.AppIcon
+import com.linuxcommandlibrary.app.ui.composables.debouncedClickable
 import com.linuxcommandlibrary.app.ui.composables.getIconId
 import com.linuxcommandlibrary.app.ui.composables.rememberIconPainter
 import com.linuxcommandlibrary.app.ui.theme.LocalCustomColors
@@ -54,7 +54,7 @@ fun BasicCategoriesScreen(
                 },
                 modifier = Modifier
                     .pointerHoverIcon(PointerIcon.Hand)
-                    .clickable {
+                    .debouncedClickable {
                         onNavigate(
                             NavEvent.ToBasicGroups(basicCategory.id, basicCategory.title),
                         )

composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/screens/commanddetail/CommandDetailScreen.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.unit.sp
 import com.linuxcommandlibrary.app.NavEvent
 import com.linuxcommandlibrary.app.data.CommandSectionInfo
 import com.linuxcommandlibrary.app.ui.composables.TipSectionContent
+import com.linuxcommandlibrary.app.ui.composables.rememberDebouncedClick
 import com.linuxcommandlibrary.app.ui.theme.LocalCustomColors
 import com.linuxcommandlibrary.shared.MarkdownParser
 import kotlinx.collections.immutable.ImmutableList
@@ -112,7 +113,7 @@ private fun SeeAlsoSectionContent(
             seeAlsoCommands.forEach { name ->
                 SuggestionChip(
                     modifier = Modifier.pointerHoverIcon(PointerIcon.Hand),
-                    onClick = {
+                    onClick = rememberDebouncedClick {
                         onNavigate(NavEvent.ToCommand(name))
                     },
                     label = {

composeApp/src/commonMain/kotlin/com/linuxcommandlibrary/app/ui/screens/commandlist/CommandListScreen.kt

@@ -1,7 +1,6 @@
 package com.linuxcommandlibrary.app.ui.screens.commandlist
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
@@ -13,7 +12,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.pointer.PointerIcon
@@ -23,6 +21,7 @@ import com.linuxcommandlibrary.app.data.CommandInfo
 import com.linuxcommandlibrary.app.ui.composables.AppIcon
 import com.linuxcommandlibrary.app.ui.composables.FastScrollBar
 import com.linuxcommandlibrary.app.ui.composables.HighlightedText
+import com.linuxcommandlibrary.app.ui.composables.debouncedClickable
 import com.linuxcommandlibrary.app.ui.composables.rememberIconPainter
 import com.linuxcommandlibrary.app.ui.theme.LocalCustomColors
 
@@ -93,10 +92,8 @@ fun CommandListItem(
         },
         modifier = Modifier
             .pointerHoverIcon(PointerIcon.Hand)
-            .clickable(
-                onClick = remember(command.name, onNavigate) {
-                    { onNavigate(NavEvent.ToCommand(command.name)) }
-                },
-            ),
+            .debouncedClickable {
+                onNavigate(NavEvent.ToCommand(command.name))
+            },
     )
 }