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:
Christian Byrne
2025-12-13 12:55:42 -08:00
committed by GitHub
parent 5187a77234
commit fd9747375d

View File

@@ -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"