Kototoro Browse Source Scroll

Kototoro Browse Source Scroll

Use this skill when the Browse/Explore page stalls, freezes, or shows a blank frame while switching to the sources area, especially with hundreds or thousands of installed/enabled sources.

Root Cause Pattern

Do not treat this as only an image/icon loading problem. In Kototoro the expensive path can be:

• Rendering all sources inside one large composable block.
• Grouping/chunking sources during every recomposition.
• Showing source quick access fully expanded while tracking recommendation hero content is also present.
• Mixing discover recommendation loading state with source loading state.
• Recreating source rows on every tab/filter change because keys/content types are too coarse.

Preferred Fix Pattern

• Split source quick access into LazyListScope items instead of a single detached block.
• Render source cards as lazy rows with stable row keys and contentType.
• Precompute source metrics with remember(gridScale).
• Precompute groups with remember(sources, isGroupedByLanguage, context).
• Default to a collapsed source section when recommendations are enabled; expand only on user request.
• Force expanded only when recommendations are disabled, so source-only mode preserves the old direct-access behavior.
• Track source loading separately from discover/recommendation loading.

Implementation Checklist

• Add a BrowseSourceItems.isLoadingOnly or equivalent source-specific loading state.
• Keep recommendation loading in a separate isDiscoverLoadingOnly.
• Compute sourceColumns from list mode and metrics.
• Use a small collapsed count such as columns * 5.
• Build visibleSourceGroups with a max source count.
• Use itemsIndexed rows:

itemsIndexed(
    items = rows,
    key = { rowIndex, rowSources ->
        val firstId = rowSources.firstOrNull()?.id ?: rowIndex.toLong()
        "source_row_${groupIndex}_${rowIndex}_$firstId"
    },
    contentType = { _, _ -> "source_row" },
) { _, rowSources ->
    SourceQuickAccessRow(...)
}

Pitfalls

• Do not put a large nested source grid inside one item if the page itself is a LazyColumn.
• Do not use only index keys for source rows if groups can change.
• Do not let disabled recommendation features still trigger recommendation load or refresh.
• Do not remove source long-click selection behavior while refactoring rows.

Verification

Run:

JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64" ./gradlew :app:compileDebugKotlin --no-daemon

Manual acceptance:

• Switching to Browse with many sources does not pause before first paint.
• Scrolling remains responsive with hundreds or thousands of sources.
• "Show more/less" works and preserves source click/long-click behavior.
• Source-only mode still shows all sources without hiding access behind recommendations.