@oat-sa/tao-core-ui 3.24.0 → 3.24.1

package/dist/resourcemgr/fileBrowser.js

@@ -204,7 +204,18 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	 */
 	const NS = 'resourcemgr';
 	const LOGGER = loggerFactory(`ui/${NS}`);
-	const DEFAULT_AJAX_TIMEOUT_MS = 10000;
+	const DEFAULT_AJAX_TIMEOUT_MS = 30000;
+	const TREE_LOADING_REF_KEY = `${NS}TreeLoadingRefCount`;
+
+	/**
+	 * @param {Object} data
+	 * @returns {Array}
+	 */
+	function folderChildrenOnly(data) {
+	  return _.filter(data && data.children, function (child) {
+	    return child && child.path && !child.uri;
+	  });
+	}
 	function fileBrowser (options) {
 	  if (!options.browseUrl && options.url) {
 	    options.browseUrl = options.url;
@@ -221,15 +232,50 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	  // for pagination
 	  let selectedClass = {
 	    path: rootPath,
-	    childrenLimit: 10,
+	    childrenLimit: 11,
 	    total: 0,
 	    page: 1
 	  };
 	  let searchMode = false;
 	  let sort = Object.assign({}, assetSearchContract.DEFAULT_SORT);
+	  const splitBrowse = options.splitBrowse !== false;
 	  const ajaxTimeoutMs = Number.isFinite(Number(options.ajaxTimeoutMs)) && Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) : DEFAULT_AJAX_TIMEOUT_MS;
+	  const $treeLoadingOverlay = $$1('.file-browser-tree-loading', $fileBrowser);
+	  const $treeLoadingStatus = $$1('.file-browser-tree-loading-status', $treeLoadingOverlay);
+
+	  /**
+	   * Ref-count in-flight browse requests and toggle the tree loading overlay.
+	   * @param {Boolean} increment - true when a load starts, false when it finishes
+	   */
+	  function setTreeLoading(increment) {
+	    let treeLoadingRefCount = Number($fileBrowser.data(TREE_LOADING_REF_KEY)) || 0;
+	    treeLoadingRefCount += increment ? 1 : -1;
+	    if (treeLoadingRefCount < 0) {
+	      treeLoadingRefCount = 0;
+	    }
+	    $fileBrowser.data(TREE_LOADING_REF_KEY, treeLoadingRefCount);
+	    const loading = treeLoadingRefCount > 0;
+	    $fileBrowser.toggleClass('is-tree-loading', loading);
+	    $fileBrowser.attr('aria-busy', loading ? 'true' : 'false');
+	    $treeLoadingOverlay.toggleClass('hidden', !loading).attr('aria-hidden', loading ? 'false' : 'true');
+	    $treeLoadingStatus.attr('aria-busy', loading ? 'true' : 'false');
+	  }
+
+	  /**
+	   * Show or hide the asset table loading overlay (browse mode only).
+	   * @param {Boolean} loading
+	   */
+	  function setFilesLoading(loading) {
+	    if (searchMode) {
+	      return;
+	    }
+	    $container.trigger(`filesloading.${NS}`, [!!loading]);
+	  }
 	  $container.on(`searchmode.${NS}`, function (e, enabled) {
 	    searchMode = !!enabled;
+	    if (searchMode) {
+	      $container.trigger(`filesloading.${NS}`, [false]);
+	    }
 	  });
 	  $container.on(`sortchange.${NS}`, function (e, nextSort) {
 	    sort = Object.assign({}, assetSearchContract.DEFAULT_SORT, nextSort || {});
@@ -248,9 +294,14 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	      return;
 	    }
 	    const subTree = getByExactPath(fileTree, targetPath) || getByPath(fileTree, targetPath) || fileTree;
+	    if (!searchMode) {
+	      setFilesLoading(true);
+	    }
 	    getFolderContent(subTree, targetPath, function (content) {
 	      if (content) {
 	        selectFolder(content, targetPath);
+	      } else {
+	        setFilesLoading(false);
 	      }
 	    });
 	  });
@@ -274,8 +325,15 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	  });
 
 	  //load the content of the ROOT
+	  const showInitialListLoading = !searchMode && root === 'local';
+	  if (showInitialListLoading) {
+	    setFilesLoading(true);
+	  }
 	  getFolderContent(fileTree, rootPath, function (content) {
 	    if (!content) {
+	      if (showInitialListLoading) {
+	        setFilesLoading(false);
+	      }
 	      return;
 	    }
 	    indexTree(content);
@@ -303,6 +361,8 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	      if (root !== 'local') {
 	        options.hasAlreadySelected = true;
 	      }
+	    } else if (showInitialListLoading) {
+	      setFilesLoading(false);
 	    }
 	  });
 
@@ -312,6 +372,14 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	    const $selected = $$1(this);
 	    const fullPath = $selected.data('path');
 	    const subTree = getByExactPath(fileTree, fullPath);
+	    const openingFolder = !searchMode && fullPath !== selectedClass.path;
+	    if (openingFolder) {
+	      selectedClass.page = 1;
+	    }
+	    if (!searchMode) {
+	      setFilesLoading(true);
+	    }
+	    invalidateFolderFiles(fullPath);
 
 	    //get the folder content
 	    getFolderContent(subTree, fullPath, function (content) {
@@ -341,6 +409,8 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 
 	        //internal event to set the file-selector content
 	        selectFolder(content, fullPath);
+	      } else if (!searchMode) {
+	        setFilesLoading(false);
 	      }
 	    });
 	  });
@@ -361,10 +431,11 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	    }
 	    if (targetPath !== selectedClass.path) {
 	      selectedClass.path = targetPath;
-	      selectedClass.page = 1;
 	    }
+	    selectedClass.page = 1;
 	    invalidateFolderFiles(targetPath);
-	    reloadSortedFolder();
+	    const pendingUpload = file && !file.error && (file.uri || file.name) ? file : null;
+	    reloadSortedFolder(pendingUpload ? [pendingUpload] : []);
 	  });
 	  $container.on(`filedelete.${NS}`, function (e, path) {
 	    if (searchMode) {
@@ -494,13 +565,16 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	    $container.data('activeFileBrowserRoot', root);
 	    if (searchMode) {
 	      $container.trigger(`folderpath.${NS}`, [path, content.label]);
-	      $container.trigger(`folderselect.${NS}`, [content.label, getPage(content.children || []), path, content]);
+	      $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), path, content]);
 	      return;
 	    }
 	    updateSelectedClass(path, content.total, content.childrenLimit);
 	    $container.trigger(`folderpath.${NS}`, [path, content.label]);
-	    $container.trigger(`folderselect.${NS}`, [content.label, getPage(content.children || []), path, content]);
+	    $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), path, content]);
 	    renderPagination();
+	    if (!searchMode) {
+	      setFilesLoading(false);
+	    }
 	  }
 
 	  /**
@@ -517,6 +591,172 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	    }
 	    return files;
 	  }
+
+	  /**
+	   * Files for the table (split list payload or legacy children slice).
+	   * @param {Object} content
+	   * @returns {Array}
+	   */
+	  function getFilesForDisplay(content) {
+	    if (!content) {
+	      return [];
+	    }
+	    if (splitBrowse) {
+	      return content.listItems || [];
+	    }
+	    return getPage(content.children || []);
+	  }
+	  function listCacheKey() {
+	    return `${sort.field}:${sort.direction}:${selectedClass.page}`;
+	  }
+
+	  /**
+	   * Snapshot list request identity (folder + page/sort) when a browse starts.
+	   * @returns {{path: String, cacheKey: String}}
+	   */
+	  function captureListRequestContext() {
+	    return {
+	      path: selectedClass.path,
+	      cacheKey: listCacheKey()
+	    };
+	  }
+
+	  /**
+	   * Whether navigation changed before an in-flight list response should apply.
+	   * @param {{path: String, cacheKey: String}} captured
+	   * @returns {Boolean}
+	   */
+	  function isListRequestStale(captured) {
+	    return !captured || captured.path !== selectedClass.path || captured.cacheKey !== listCacheKey();
+	  }
+
+	  /**
+	   * @param {Object} response
+	   * @returns {Object}
+	   */
+	  function unwrapBrowseResponse(response) {
+	    if (response && response.success === false) {
+	      return Promise.reject(response);
+	    }
+	    let data = response && response.data ? response.data : response;
+	    data = updatePermissions(data);
+	    if (data.children && data.children.length > 0) {
+	      data.children = data.children.map(function (child) {
+	        return updatePermissions(child);
+	      });
+	    }
+	    if (data.items && data.items.length > 0) {
+	      data.items = data.items.map(function (item) {
+	        return updatePermissions(item);
+	      });
+	    }
+	    return data;
+	  }
+
+	  /**
+	   * @param {String} path
+	   * @param {Object} extraData
+	   * @returns {Promise}
+	   */
+	  function browseRequest(path, extraData) {
+	    const parameters = {};
+	    parameters[options.pathParam || 'path'] = path;
+	    return Promise.resolve($$1.ajax({
+	      url: options.browseUrl,
+	      method: 'GET',
+	      dataType: 'json',
+	      timeout: ajaxTimeoutMs,
+	      data: _.merge(parameters, options.params, extraData)
+	    })).then(unwrapBrowseResponse);
+	  }
+
+	  /**
+	   * @param {Object} tree
+	   * @param {String} path
+	   * @param {Object} data
+	   */
+	  function applyTreePayload(tree, path, data) {
+	    const folderData = Object.assign({}, data, {
+	      children: folderChildrenOnly(data)
+	    });
+	    if (!tree.path) {
+	      _.merge(tree, folderData);
+	    } else if (folderData.children) {
+	      setToPath(tree, path, folderData);
+	      if (!_.find(folderData.children, 'path')) {
+	        markFolderEmptyAtPath(tree, path);
+	      }
+	    } else {
+	      setToPath(tree, path, folderData);
+	      markFolderEmptyAtPath(tree, path);
+	    }
+	  }
+
+	  /**
+	   * @param {Object} tree
+	   * @param {String} path
+	   * @param {Object} listData
+	   * @param {String} cacheKey
+	   */
+	  function applyListPayload(tree, path, listData, cacheKey) {
+	    const node = getByExactPath(tree, path) || getByPath(tree, path);
+	    if (!node || !listData) {
+	      return;
+	    }
+	    node.listItems = listData.items || [];
+	    node.total = listData.total;
+	    node.childrenLimit = listData.pageSize || listData.childrenLimit || selectedClass.childrenLimit;
+	    node.listPage = listData.page;
+	    node.totalIsApproximate = listData.totalIsApproximate;
+	    node.listCacheKey = cacheKey;
+	  }
+
+	  /**
+	   * Ensure upload responses appear in the table before Elasticsearch catches up.
+	   * @param {String} path
+	   * @param {Array<Object>} uploads
+	   */
+	  function mergePendingUploads(path, uploads) {
+	    if (!uploads || !uploads.length) {
+	      return;
+	    }
+	    const node = getByExactPath(fileTree, path) || getByPath(fileTree, path);
+	    if (!node) {
+	      return;
+	    }
+	    if (!Array.isArray(node.listItems)) {
+	      node.listItems = [];
+	    }
+	    let added = 0;
+	    uploads.forEach(function (uploaded) {
+	      if (!uploaded || uploaded.error) {
+	        return;
+	      }
+	      const normalized = updatePermissions(uploaded);
+	      if (!normalized.uri && !normalized.name) {
+	        return;
+	      }
+	      const exists = _.some(node.listItems, function (item) {
+	        return normalized.uri && item.uri === normalized.uri || normalized.name && item.name === normalized.name;
+	      });
+	      if (exists) {
+	        return;
+	      }
+	      node.listItems.push(normalized);
+	      added++;
+	    });
+	    if (!added) {
+	      return;
+	    }
+	    if (splitBrowse) {
+	      node.listItems = assetSearchContract.sortAssetItems(node.listItems, sort);
+	    }
+	    const total = Number(node.total);
+	    if (Number.isFinite(total) && total >= 0) {
+	      node.total = total + added;
+	    }
+	  }
+
 	  /**
 	   * Get the content of a folder, either in the model or load it
 	   * @param {Object} tree - the tree model
@@ -530,6 +770,44 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	    }
 	  }
 	  function getFolderContent(tree, path, cb) {
+	    if (splitBrowse) {
+	      const existing = getByExactPath(tree, path) || getByPath(tree, path);
+	      const needTree = !existing || !existing.children && !existing.empty;
+	      const cacheKey = listCacheKey();
+	      const needList = !existing || existing.listCacheKey !== cacheKey;
+	      const treePromise = needTree ? (setTreeLoading(true), browseRequest(path, {
+	        part: 'tree',
+	        depth: 1,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      }).then(function (data) {
+	        setTreeLoading(false);
+	        return data;
+	      }, function (error) {
+	        setTreeLoading(false);
+	        return Promise.reject(error);
+	      })) : Promise.resolve(null);
+	      const listPromise = needList ? browseRequest(path, {
+	        part: 'list',
+	        page: selectedClass.page,
+	        pageSize: selectedClass.childrenLimit || 11,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      }) : Promise.resolve(null);
+	      Promise.all([treePromise, listPromise]).then(function (_ref) {
+	        let [treeData, listData] = _ref;
+	        if (treeData) {
+	          applyTreePayload(tree, path, treeData);
+	        }
+	        if (listData) {
+	          applyListPayload(tree, path, listData, cacheKey);
+	        }
+	        cb(getByExactPath(tree, path) || getByPath(tree, path));
+	      }).catch(function () {
+	        cb(null);
+	      });
+	      return;
+	    }
 	    let content = getByPath(tree, path);
 	    if (!content || !content.children && !content.empty) {
 	      loadContent(path).then(function (data) {
@@ -555,7 +833,7 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	      });
 	      // Use folder total (not selectedClass): openInitialPath runs before selectFolder.
 	      const expectedTotal = Number(content.total);
-	      const pageSize = Number(content.childrenLimit) || selectedClass.childrenLimit || 10;
+	      const pageSize = Number(content.childrenLimit) || selectedClass.childrenLimit || 11;
 	      const page = selectedClass.page || 1;
 	      // Missing/NaN total → unknown size; refetch so invalidated cache is not treated as complete.
 	      if (!Number.isFinite(expectedTotal) || files.length < expectedTotal && files.length < page * pageSize) {
@@ -715,7 +993,16 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	   */
 	  function invalidateFolderFiles(path) {
 	    const content = getByExactPath(fileTree, path);
-	    if (content && Array.isArray(content.children)) {
+	    if (!content) {
+	      return;
+	    }
+	    if (splitBrowse) {
+	      delete content.listItems;
+	      delete content.listCacheKey;
+	      delete content.listPage;
+	      return;
+	    }
+	    if (Array.isArray(content.children)) {
 	      content.children = content.children.filter(function (child) {
 	        return child.path && !child.uri;
 	      });
@@ -727,11 +1014,15 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	   * @param {String} path
 	   * @param {Object} data
 	   */
-	  function replaceFolderContent(path, data) {
+	  function replaceFolderContent(path, data, cacheKey) {
 	    const content = getByExactPath(fileTree, path);
 	    if (!content || !data) {
 	      return;
 	    }
+	    if (splitBrowse && Object.prototype.hasOwnProperty.call(data, 'items')) {
+	      applyListPayload(fileTree, path, data, cacheKey || listCacheKey());
+	      return;
+	    }
 	    if (Object.prototype.hasOwnProperty.call(data, 'children')) {
 	      content.children = data.children;
 	    } else {
@@ -761,6 +1052,7 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	  function loadContent(path) {
 	    const parameters = {};
 	    parameters[options.pathParam || 'path'] = path;
+	    setTreeLoading(true);
 	    return Promise.resolve($$1.ajax({
 	      url: options.browseUrl,
 	      method: 'GET',
@@ -784,6 +1076,12 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	        data.children.map(responseChildren => updatePermissions(responseChildren));
 	      }
 	      return data;
+	    }).then(function (data) {
+	      setTreeLoading(false);
+	      return data;
+	    }, function (error) {
+	      setTreeLoading(false);
+	      return Promise.reject(error);
 	    });
 	  }
 
@@ -853,7 +1151,7 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	    selectedClass = {
 	      path,
 	      total: Number.isFinite(normalizedTotal) && normalizedTotal >= 0 ? normalizedTotal : 0,
-	      childrenLimit: Number.isFinite(normalizedChildrenLimit) && normalizedChildrenLimit > 0 ? normalizedChildrenLimit : selectedClass.childrenLimit || 10,
+	      childrenLimit: Number.isFinite(normalizedChildrenLimit) && normalizedChildrenLimit > 0 ? normalizedChildrenLimit : selectedClass.childrenLimit || 11,
 	      page: 1
 	    };
 	  }
@@ -890,17 +1188,35 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	  /**
 	   * Re-fetch the current folder with the active sort and publish files.
 	   */
-	  function reloadSortedFolder() {
-	    const path = selectedClass.path;
-	    loadContent(path).then(function (data) {
+	  function reloadSortedFolder(pendingUploads) {
+	    const listRequest = captureListRequestContext();
+	    const path = listRequest.path;
+	    if (!searchMode && isActiveBrowser()) {
+	      setFilesLoading(true);
+	    }
+	    const loadPromise = splitBrowse ? browseRequest(path, {
+	      part: 'list',
+	      page: selectedClass.page,
+	      pageSize: selectedClass.childrenLimit || 11,
+	      sortBy: sort.field,
+	      sortDir: sort.direction
+	    }) : loadContent(path);
+	    loadPromise.then(function (data) {
 	      if (!data) {
+	        setFilesLoading(false);
 	        return;
 	      }
-	      replaceFolderContent(path, data);
+	      if (isListRequestStale(listRequest)) {
+	        setFilesLoading(false);
+	        return;
+	      }
+	      replaceFolderContent(path, data, listRequest.cacheKey);
+	      mergePendingUploads(path, pendingUploads);
 	      const content = getByExactPath(fileTree, path) || data;
 	      selectFolder(content, content.path || path);
 	    }).catch(function (error) {
 	      LOGGER.error(error);
+	      setFilesLoading(false);
 	    });
 	  }
 
@@ -908,14 +1224,53 @@ define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpe
 	   * Load page
 	   */
 	  function loadPage() {
+	    const listRequest = captureListRequestContext();
+	    if (!searchMode && isActiveBrowser()) {
+	      setFilesLoading(true);
+	    }
+	    if (splitBrowse) {
+	      const path = listRequest.path;
+	      browseRequest(path, {
+	        part: 'list',
+	        page: selectedClass.page,
+	        pageSize: selectedClass.childrenLimit || 11,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      }).then(function (data) {
+	        if (isListRequestStale(listRequest)) {
+	          setFilesLoading(false);
+	          return;
+	        }
+	        applyListPayload(fileTree, path, data, listRequest.cacheKey);
+	        const content = getByExactPath(fileTree, path);
+	        if (content) {
+	          $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), content.path, content]);
+	          renderPagination();
+	        }
+	        setFilesLoading(false);
+	      }).catch(function (error) {
+	        LOGGER.error(error);
+	        setFilesLoading(false);
+	      });
+	      return;
+	    }
 	    const subTree = getByPath(fileTree, selectedClass.path) || fileTree;
 
 	    //get the folder content
 	    getFolderContent(subTree, selectedClass.path, function (content) {
+	      if (isListRequestStale(listRequest)) {
+	        if (!searchMode) {
+	          setFilesLoading(false);
+	        }
+	        return;
+	      }
 	      indexTree(fileTree);
 	      if (content) {
 	        //internal event to set the file-selector content
-	        $container.trigger(`folderselect.${NS}`, [content.label, getPage(content.children), content.path, content]);
+	        $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), content.path, content]);
+	      }
+	      if (!searchMode) {
+	        setFilesLoading(false);
 	      }
 	    });
 	  }

package/dist/resourcemgr/filePreview.js

@@ -67,6 +67,39 @@ define(['jquery', 'lodash', 'util/bytes', 'context', 'ui/previewer'], function (
         }
         return String(value);
       }
+
+      /**
+       * Row markup uses data-download for permission flag (boolean), not the URL.
+       * @param {*} file
+       * @returns {string}
+       */
+      function downloadHref(file) {
+        if (typeof file.downloadUrl === 'string' && file.downloadUrl) {
+          return file.downloadUrl;
+        }
+        if (typeof file.url === 'string' && file.url) {
+          const query = file.url.split('#')[0].split('?')[1] || '';
+          const hasSvgzSupport = query.split('&').some(param => param.split('=')[0] === 'svgzsupport');
+          return hasSvgzSupport ? file.url : `${file.url}&svgzsupport=true`;
+        }
+        if (typeof file.download === 'string' && file.download) {
+          return file.download;
+        }
+        return '';
+      }
+
+      /**
+       * @param {*} file
+       * @returns {string}
+       */
+      function downloadFilename(file) {
+        if (typeof file.display === 'string' && file.display) {
+          return file.display;
+        }
+        const path = file.file || '';
+        const idx = path.lastIndexOf('/');
+        return idx >= 0 ? path.slice(idx + 1) : path;
+      }
       function startPreview(file, preview, download, select) {
         if (preview) {
           $previewer.previewer(file);
@@ -81,9 +114,15 @@ define(['jquery', 'lodash', 'util/bytes', 'context', 'ui/previewer'], function (
           $propSize.text(EMPTY_META);
         }
         if (download) {
-          $link.attr('href', file.download).attr('download', file.file);
-          if ($link.hasClass('hidden')) {
-            $link.removeClass('hidden');
+          const href = downloadHref(file);
+          if (href) {
+            $link.attr('href', href).attr('download', downloadFilename(file));
+            if ($link.hasClass('hidden')) {
+              $link.removeClass('hidden');
+            }
+          } else {
+            $link.attr('href', '#').removeAttr('download');
+            $link.addClass('hidden');
           }
         } else {
           $link.attr('href', '#').attr('download', '#');

package/dist/resourcemgr/fileSelector.js

@@ -312,6 +312,8 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       let $container = options.$target;
       let $fileSelector = $$1('.file-selector', $container);
       let $filesWrapper = $$1('.files-wrapper', $fileSelector);
+      let $filesListLoading = $$1('.files-list-loading', $filesWrapper);
+      let $filesListLoadingStatus = $$1('.files-list-loading-status', $filesListLoading);
       let $fileContainer = $$1('.files-list', $fileSelector);
       let $placeholder = $$1('.empty', $fileSelector);
       let $uploader = $$1('.file-upload-container', $fileSelector);
@@ -338,6 +340,18 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
         searchMode = !!enabled;
         $fileSelector.toggleClass('search-mode', searchMode);
       });
+      function applyFilesListLoading(loading) {
+        $filesWrapper.toggleClass('is-files-loading', !!loading);
+        $filesWrapper.attr('aria-busy', loading ? 'true' : 'false');
+        $filesListLoading.toggleClass('hidden', !loading).attr('aria-hidden', loading ? 'false' : 'true');
+        $filesListLoadingStatus.attr('aria-busy', loading ? 'true' : 'false');
+      }
+      $container.on(`filesloading.${ns}`, function (e, loading) {
+        if (searchMode) {
+          return;
+        }
+        applyFilesListLoading(loading);
+      });
 
       //update current folder
       $container.on(`folderselect.${ns}`, function (e, fullPath, data, activePath, content) {
@@ -345,6 +359,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
         if (searchMode) {
           return;
         }
+        applyFilesListLoading(false);
 
         //update title
         if ($container[0].querySelector('.upload')) {