[PR #20912] [CLOSED] perf: add keys to Svelte {#each} blocks for efficient DOM diffing #41457

New Issue

GiteaMirror · 2026-04-25T13:42:15-05:00

GiteaMirror commented

2026-04-25 13:42:15 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/20912
Author: @sjhddh
Created: 1/23/2026
Status: ❌ Closed

Base: dev ← Head: fix/svelte-keyed-each-blocks

📝 Commits (1)

a076c7c perf: add keys to Svelte {#each} blocks for efficient DOM diffing

📊 Changes

6 files changed (+8 additions, -8 deletions)

View changed files

📝 src/lib/components/workspace/Prompts.svelte (+1 -1)
📝 src/lib/components/workspace/Tools.svelte (+1 -1)
📝 src/lib/components/workspace/common/AccessControl.svelte (+2 -2)
📝 src/lib/components/workspace/common/MemberSelector.svelte (+2 -2)
📝 src/lib/components/workspace/common/TagSelector.svelte (+1 -1)
📝 src/lib/components/workspace/common/ViewSelector.svelte (+1 -1)

📄 Description

Summary

Add unique keys to {#each} blocks in workspace components to enable Svelte's efficient keyed DOM patching instead of full re-renders.

Problem

Multiple {#each} blocks in workspace components iterate over lists without a unique key. This forces Svelte to diff the entire DOM subtree on updates, which is inefficient especially for large lists.

Solution

Add unique keys to {#each} blocks:

ViewSelector.svelte: {#each items as item (item.value)}
TagSelector.svelte: {#each items as item (item.value)}
MemberSelector.svelte: {#each groupIds as id (id)} and {#each userIds as id (id)}
AccessControl.svelte: {#each accessGroups as group (group.id)}
Tools.svelte: {#each filteredItems as tool (tool.id)}
Prompts.svelte: {#each filteredItems as prompt (prompt.command)}

Test plan

Verified all components render correctly
Tested list filtering/sorting works as expected
Confirmed no visual regressions

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/20912 **Author:** [@sjhddh](https://github.com/sjhddh) **Created:** 1/23/2026 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `fix/svelte-keyed-each-blocks` --- ### 📝 Commits (1) - [`a076c7c`](https://github.com/open-webui/open-webui/commit/a076c7c3bd943eca1c42cbda85ea1d3d566684cd) perf: add keys to Svelte {#each} blocks for efficient DOM diffing ### 📊 Changes **6 files changed** (+8 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/workspace/Prompts.svelte` (+1 -1) 📝 `src/lib/components/workspace/Tools.svelte` (+1 -1) 📝 `src/lib/components/workspace/common/AccessControl.svelte` (+2 -2) 📝 `src/lib/components/workspace/common/MemberSelector.svelte` (+2 -2) 📝 `src/lib/components/workspace/common/TagSelector.svelte` (+1 -1) 📝 `src/lib/components/workspace/common/ViewSelector.svelte` (+1 -1) </details> ### 📄 Description ## Summary Add unique keys to `{#each}` blocks in workspace components to enable Svelte's efficient keyed DOM patching instead of full re-renders. ## Problem Multiple `{#each}` blocks in workspace components iterate over lists without a unique key. This forces Svelte to diff the entire DOM subtree on updates, which is inefficient especially for large lists. ## Solution Add unique keys to `{#each}` blocks: - `ViewSelector.svelte`: `{#each items as item (item.value)}` - `TagSelector.svelte`: `{#each items as item (item.value)}` - `MemberSelector.svelte`: `{#each groupIds as id (id)}` and `{#each userIds as id (id)}` - `AccessControl.svelte`: `{#each accessGroups as group (group.id)}` - `Tools.svelte`: `{#each filteredItems as tool (tool.id)}` - `Prompts.svelte`: `{#each filteredItems as prompt (prompt.command)}` ## Test plan - [x] Verified all components render correctly - [x] Tested list filtering/sorting works as expected - [x] Confirmed no visual regressions --- ### Contributor License Agreement By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-04-25 13:42:15 -05:00

GiteaMirror closed this issue

2026-04-25 13:42:16 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#41457