fix(frontend): new file and folder creation hang, empty folder UX

- Replace circular watchEffects in FileExplorer/Gallery with explicit watchers

  to stop recursive Vue updates when creating items in empty folders.

- Move EmptyFolder rendering inside FileExplorer/Gallery so empty/list swaps

  no longer trigger folder slide transitions.

- Keep EmptyFolder text size consistent across list and gallery views.
This commit is contained in:
2026-06-16 22:09:53 +00:00
parent bf8a049b92
commit 77e35cf0fc
5 changed files with 110 additions and 63 deletions
+3 -12
View File
@@ -15,7 +15,6 @@
/>
</KeepAlive>
</Transition>
<EmptyFolder :documents="documents" :path="props.path" />
</div>
<div v-if="store.searchLoading" class="search-loading">Searching...</div>
</template>
@@ -38,7 +37,9 @@ const props = defineProps<{
// Folder path for component keys - only recreate component when folder changes, not search
const folderPath = computed(() => props.path.join('/'))
const cacheKey = computed(() => `${store.prefs.gallery ? 'gallery' : 'list'}:${folderPath.value}`)
const cacheKey = computed(
() => `${store.prefs.gallery ? 'gallery' : 'list'}:${folderPath.value}`
)
const transitionName = computed(() => {
if (store.transitionDirection === 'forward') return 'slide-forward'
@@ -140,16 +141,6 @@ watch(
</script>
<style scoped>
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
font-size: 2rem;
text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
color: var(--accent-color);
}
.search-loading {
position: fixed;
bottom: 1rem;