feat(fileview) show loader only if requests take more than 100ms

This commit is contained in:
Edouard Vanbelle
2026-03-23 13:16:31 +01:00
parent fdf1184601
commit 266fc26e16
+13 -6
View File
@@ -125,12 +125,16 @@ async function loadFiles(options = { insertHistory: true}) {
window.isLoadingFiles = true; window.isLoadingFiles = true;
elements.filesGrid.innerHTML = ` // This to avoid blinking page, a better solution would be to put loading on an overlay and remove timeout
<div class="files-loading-spinner"> let loadingFiles = setTimeout( () => {
<div class="spinner"></div> // display loader after few delay (will be canceled if result take less time)
<span>${window.i18n ? window.i18n.t('files.loading') : 'Loading files…'}</span> elements.filesGrid.innerHTML = `
</div> <div class="files-loading-spinner">
`; <div class="spinner"></div>
<span>${window.i18n ? window.i18n.t('files.loading') : 'Loading files…'}</span>
</div>
`;
}, 100);
if (!app.userHomeFolderId) { if (!app.userHomeFolderId) {
await window.resolveHomeFolder(); await window.resolveHomeFolder();
@@ -186,6 +190,9 @@ async function loadFiles(options = { insertHistory: true}) {
console.log(`Loading listing from ${url}`); console.log(`Loading listing from ${url}`);
const response = await fetch(url, requestOptions); const response = await fetch(url, requestOptions);
// not required anymore
clearTimeout( loadingFiles);
if (response.status === 401 || response.status === 403) { if (response.status === 401 || response.status === 403) {
console.warn("Auth error when loading files, showing empty list"); console.warn("Auth error when loading files, showing empty list");
elements.filesGrid.innerHTML = '<div class="empty-state"><p>Could not load files</p></div>'; elements.filesGrid.innerHTML = '<div class="empty-state"><p>Could not load files</p></div>';