From 29e98721b580343f3a09ac38ca9689a30ab8c983 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Fri, 8 Dec 2023 12:08:22 +1000
Subject: [PATCH] Fix slow deck options performance

column-count was causing progressively-worse performance. By switching
to manual left/right column assignment, we get faster performance and
retain the top-to-bottom/left-to-right flow.

This also removes the outer DynamicallySlottable, which as far as I'm
aware, is not used by any add-ons.

Closes #2877
---
 ts/deck-options/DeckOptionsPage.svelte | 100 +++++++++----------------
 1 file changed, 37 insertions(+), 63 deletions(-)

diff --git a/ts/deck-options/DeckOptionsPage.svelte b/ts/deck-options/DeckOptionsPage.svelte
index e503ea708..29231472d 100644
--- a/ts/deck-options/DeckOptionsPage.svelte
+++ b/ts/deck-options/DeckOptionsPage.svelte
@@ -6,8 +6,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
 
     import Container from "../components/Container.svelte";
-    import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
-    import Item from "../components/Item.svelte";
     import Row from "../components/Row.svelte";
     import type { DynamicSvelteComponent } from "../sveltelib/dynamicComponent";
     import Addons from "./Addons.svelte";
@@ -67,63 +65,47 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         --gutter-block="0.75rem"
         class="container-columns"
     >
-        <DynamicallySlottable slotHost={Item} api={options}>
-            <Item>
-                <Row class="row-columns">
-                    <DailyLimits {state} api={dailyLimits} bind:onPresetChange />
-                </Row>
-            </Item>
+        <div>
+            <Row class="row-columns">
+                <DailyLimits {state} api={dailyLimits} bind:onPresetChange />
+            </Row>
 
-            <Item>
-                <Row class="row-columns">
-                    <NewOptions {state} api={newOptions} />
-                </Row>
-            </Item>
+            <Row class="row-columns">
+                <NewOptions {state} api={newOptions} />
+            </Row>
 
-            <Item>
-                <Row class="row-columns">
-                    <LapseOptions {state} api={lapseOptions} />
-                </Row>
-            </Item>
+            <Row class="row-columns">
+                <LapseOptions {state} api={lapseOptions} />
+            </Row>
 
-            <Item>
-                <Row class="row-columns">
-                    <DisplayOrder {state} api={displayOrder} />
-                </Row>
-            </Item>
+            <Row class="row-columns">
+                <DisplayOrder {state} api={displayOrder} />
+            </Row>
 
-            <Item>
-                <Row class="row-columns">
-                    <TimerOptions {state} api={timerOptions} />
-                </Row>
-            </Item>
+            <Row class="row-columns">
+                <BuryOptions {state} api={buryOptions} />
+            </Row>
+        </div>
 
-            <Item>
-                <Row class="row-columns">
-                    <BuryOptions {state} api={buryOptions} />
-                </Row>
-            </Item>
+        <div>
+            <Row class="row-columns">
+                <TimerOptions {state} api={timerOptions} />
+            </Row>
 
-            <Item>
-                <Row class="row-columns">
-                    <AudioOptions {state} api={audioOptions} />
-                </Row>
-            </Item>
+            <Row class="row-columns">
+                <AudioOptions {state} api={audioOptions} />
+            </Row>
 
             {#if $addons.length}
-                <Item>
-                    <Row class="row-columns">
-                        <Addons {state} />
-                    </Row>
-                </Item>
+                <Row class="row-columns">
+                    <Addons {state} />
+                </Row>
             {/if}
 
-            <Item>
-                <Row class="row-columns">
-                    <AdvancedOptions {state} api={advancedOptions} />
-                </Row>
-            </Item>
-        </DynamicallySlottable>
+            <Row class="row-columns">
+                <AdvancedOptions {state} api={advancedOptions} />
+            </Row>
+        </div>
     </Container>
 </div>
 
@@ -133,22 +115,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .deck-options-page {
         overflow-x: hidden;
 
+        :global(.container-columns) {
+            display: grid;
+            gap: 20px;
+        }
+
         @include bp.with-breakpoint("lg") {
-            :global(.container) {
-                display: block;
-            }
-
             :global(.container-columns) {
-                column-count: 2;
-                column-gap: 5em;
-
-                :global(.container) {
-                    break-inside: avoid;
-                }
-            }
-
-            :global(.row-columns) {
-                display: block;
+                grid-template-columns: repeat(2, 1fr);
             }
         }
     }