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

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