langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix slow deck options performance

Browse Source 
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
This commit is contained in:
Damien Elmes 2023-12-08 12:08:22 +10:00
parent 7664248550
commit 29e98721b5
1 changed files with 37 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ts/deck-options/DeckOptionsPage.svelte
View File

@ -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);
}
}
}