From 40fbea58dd2baa5a5b78151b673e317a0ad065e7 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 2 Sep 2022 15:34:09 +0200
Subject: [PATCH] Improve refresh view

---
 src/components/filetree.html | 8 ++++----
 src/components/filetree.js   | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/filetree.html b/src/components/filetree.html
index a9503fd4b..82b036909 100644
--- a/src/components/filetree.html
+++ b/src/components/filetree.html
@@ -14,7 +14,7 @@
 <div class="toolbar">
   <div class="btn-group" role="group" style="display: block;">
     <!-- TODO figure out why a line break in code between the two buttons results in a gap visually without any margin/padding set -->
-    <button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="busy || cwd === '/'"><i class="fas fa-arrow-left"></i></button><button class="btn btn-primary" ng-disabled="busy" ng-click="refresh()"><i class="fas fa-redo"></i></button>
+    <button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="busy || cwd === '/'"><i class="fas fa-arrow-left"></i></button><button class="btn btn-primary" ng-disabled="busy || busyRefresh" ng-click="refresh()"><i class="fas fa-redo" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
   </div>
   <div class="btn-group path-parts" role="group">
     <button class="btn btn-default" ng-disabled="busy || cwd === '/'" ng-click="changeDirectory('/')" ng-drop="drop($event, '/')" ng-dragleave="dragExit($event, '/')" ng-dragover="dragEnter($event, '/')"><i class="fas fa-home"></i> {{ rootDirLabel }} </button><button class="btn btn-default" ng-disabled="busy || part.path === cwd" ng-click="changeDirectory(part.path)" ng-drop="drop($event, part.path)" ng-dragleave="dragExit($event, part.path)" ng-dragover="dragEnter($event, part.path)" ng-repeat="part in cwdParts">{{ part.name }}</button>
@@ -56,13 +56,13 @@
 <div class="file-list" ng-class="{ 'entry-hovered': dropToBody, 'busy': busy }" context-menu="menuOptionsBlank" ng-mousedown="select($event, null)" ng-drop="drop($event, null)" ng-dragleave="dragExit($event, null)" ng-dragover="dragEnter($event, null)">
   <table class="table table-hover" style="margin: 0;">
     <tbody>
-      <tr ng-show="busy">
+      <tr ng-show="busy && !busyRefresh">
         <td colspan="6"><center><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center></td>
       </tr>
-      <tr ng-show="!busy && entries.length === 0">
+      <tr ng-show="!(busy && !busyRefresh) && entries.length === 0">
         <td colspan="" class="text-center">{{ 'filemanager.list.empty' | tr }}</td>
       </tr>
-      <tr ng-hide="busy" entry-hashkey="{{ entry['$$hashKey'] }}" ng-repeat="entry in entries" draggable="true" ng-dragstart="dragStart($event, entry)" ng-drop="drop($event, entry)" context-menu="menuOptions" model="entry" ng-dragleave="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered, 'entry-selected': isSelected(entry) }">
+      <tr ng-hide="busy && !busyRefresh" entry-hashkey="{{ entry['$$hashKey'] }}" ng-repeat="entry in entries" draggable="true" ng-dragstart="dragStart($event, entry)" ng-drop="drop($event, entry)" context-menu="menuOptions" model="entry" ng-dragleave="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered, 'entry-selected': isSelected(entry) }">
         <td style="width: 42px; height: 42px" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)" class="text-center">
           <i ng-show="!entry.previewUrl" class="fas fa-lg {{ entry.icon }}" ng-class="{ 'text-primary': entry.isDirectory && !isSelected(entry) }"></i>
           <img ng-show="entry.previewUrl" ng-src="{{ entry.previewUrl }}" height="42" width="42" style="object-fit: cover;"/>
diff --git a/src/components/filetree.js b/src/components/filetree.js
index 98c6b1252..4559f5ba9 100644
--- a/src/components/filetree.js
+++ b/src/components/filetree.js
@@ -29,6 +29,7 @@ function FileTreeController($scope, $translate, $timeout, Client) {
     $scope.view = this.view;
 
     $scope.busy = true;
+    $scope.busyRefresh = false;
     $scope.client = Client;
     $scope.cwd = null;
     $scope.cwdParts = [];
@@ -284,6 +285,8 @@ function FileTreeController($scope, $translate, $timeout, Client) {
     // called from the parent
     $scope.onRefresh = function () {
         $scope.selected = [];
+        $scope.busy = true;
+        $scope.busyRefresh = true;
 
         Client.filesGet($scope.backendId, $scope.backendType, $scope.cwd, 'data', function (error, result) {
             if (error) return Client.error(error);
@@ -292,6 +295,7 @@ function FileTreeController($scope, $translate, $timeout, Client) {
             amendIcons();
             sort();
 
+            $scope.busyRefresh = false;
             $scope.busy = false;
         });
     };