mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
fix: refreshing assets causes entire panel to re-render (enter loading state) (#7449)
## Problem The Media Assets panel's loading state is currently determined by the loading state of the assets store (or something similar). When the store is refetching and reconciling, it displays a loading spinner briefly on the entire panel. This causes the following issues: 1. **Visual jarring**: The loading spinner creates an unpleasant visual flash 2. **Unnecessary reflow**: All assets must re-render after the loading state changes, causing layout reflow 3. **Performance degradation**: Re-rendering all items is computationally expensive ## Expected Behavior Items should be able to be inserted into the list without: - Re-rendering any other items - Showing a jarring loading flash - Causing unnecessary reflow The loading state of individual items should be decoupled from the panel's overall loading state, allowing for incremental updates to the list without affecting the entire panel's UI. ## After (ignore random progress spinner, removed it after taking the video) https://github.com/user-attachments/assets/95d7f111-e844-44e2-a0c6-6bcbc4a34797 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7449-fix-refreshing-assets-causes-entire-panel-to-re-render-enter-loading-state-2c86d73d365081be8206f9fdbbf66772) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -59,12 +59,10 @@
|
||||
</template>
|
||||
<template #body>
|
||||
<Divider type="dashed" class="m-2" />
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading">
|
||||
<div v-if="loading && !displayAssets.length">
|
||||
<ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
|
||||
</div>
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="!displayAssets.length">
|
||||
<div v-else-if="!loading && !displayAssets.length">
|
||||
<NoResultsPlaceholder
|
||||
icon="pi pi-info-circle"
|
||||
:title="
|
||||
@@ -77,7 +75,6 @@
|
||||
:message="$t('sideToolbar.noFilesFoundMessage')"
|
||||
/>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div v-else class="relative size-full" @click="handleEmptySpaceClick">
|
||||
<VirtualGrid
|
||||
:items="mediaAssetsWithKey"
|
||||
|
||||
Reference in New Issue
Block a user