Fix: fix regression which caused a hang when loading a custom theme

src/Logic/Search/ThemeSearch.ts

@@ -1,10 +1,10 @@
 import ThemeConfig, { MinimalThemeInformation } from "../../Models/ThemeConfig/ThemeConfig"
-import { Store } from "../UIEventSource"
+import { Store, Stores } from "../UIEventSource"
 import UserRelatedState from "../State/UserRelatedState"
 import themeOverview from "../../assets/generated/theme_overview.json"
 import { OsmConnection } from "../Osm/OsmConnection"
 import { AndroidPolyfill } from "../Web/AndroidPolyfill"
-import Fuse from "fuse.js"
+import Fuse, { IFuseOptions } from "fuse.js"
 import Constants from "../../Models/Constants"
 import Locale from "../../UI/i18n/Locale"
 import { Utils } from "../../Utils"
@@ -22,9 +22,10 @@ export class ThemeSearchIndex {
         if (!themes) {
             throw "No themes loaded. Did generate:layeroverview fail?"
         }
-        const fuseOptions = {
+        const fuseOptions : IFuseOptions<MinimalThemeInformation>= {
             ignoreLocation: true,
             threshold: 0.2,
+            shouldSort: true,
             keys: [
                 { name: "id", weight: 2 },
                 "title." + language,
@@ -33,8 +34,10 @@ export class ThemeSearchIndex {
             ],
         }
 
+        const themesIndex = themes.filter((th) => th?.id !== "personal")
+        console.log("Building theme index")
         this.themeIndex = new Fuse(
-            themes.filter((th) => th?.id !== "personal"),
+            themesIndex,
             fuseOptions
         )
 
@@ -61,8 +64,7 @@ export class ThemeSearchIndex {
 
     public search(text: string, limit?: number): MinimalThemeInformation[] {
         const scored = this.searchWithScores(text)
-        let result = Array.from(scored.entries())
-        result.sort((a, b) => b[0] - a[0])
+        let result = Array.from(scored.entries()) // Already sorted, we set this option
         if (limit) {
             result = result.slice(0, limit)
         }
@@ -98,9 +100,9 @@ export class ThemeSearchIndex {
         theme: ThemeConfig
     }): Store<ThemeSearchIndex> {
         const layersToIgnore = state.theme.layers.filter((l) => l.isNormal()).map((l) => l.id)
-        const knownHidden: Store<string[]> = UserRelatedState.initDiscoveredHiddenThemes(
+        const knownHidden: Store<string[]> = Stores.ListStabilized(UserRelatedState.initDiscoveredHiddenThemes(
             state.osmConnection
-        ).map((list) => Utils.Dedup(list))
+        ).stabilized(1000).map((list) => Utils.Dedup(list)))
         const otherThemes: MinimalThemeInformation[] = ThemeSearch.officialThemes.themes.filter(
             (th) => th.id !== state.theme.id
         )

src/UI/AllThemesGui.svelte

@@ -78,7 +78,7 @@
     )
 
   const customThemes: Store<MinimalThemeInformation[]> = Stores.ListStabilized<string>(
-    state.installedUserThemes
+    state.installedUserThemes.stabilized(1000)
   ).mapD((stableIds) => Utils.NoNullInplace(stableIds.map((id) => state.getUnofficialTheme(id))))
 
   function filtered(themes: Store<MinimalThemeInformation[]>): Store<MinimalThemeInformation[]> {