filemanager: show busy state when extraction is in progress

filemanager/src/views/Home.vue

@@ -5,6 +5,12 @@
         <p>{{ fatalError }}</p>
       </Dialog>
 
+      <Dialog v-model:visible="extractInProgress" modal :header="$t('filemanager.extractionInProgress')" :closable="false" :closeOnEscape="false">
+        <div style="text-align: center;">
+          <ProgressSpinner style="width: 50px; height: 50px"/>
+        </div>
+      </Dialog>
+
       <!-- have to use v-model instead of : bind - https://github.com/primefaces/primevue/issues/815 -->
       <Dialog v-model:visible="newFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFileDialogNameInput')">
         <template #header>
@@ -101,6 +107,7 @@ import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
 import Menu from 'primevue/menu';
+import ProgressSpinner from 'primevue/progressspinner';
 
 import { useConfirm } from 'primevue/useconfirm';
 
@@ -128,6 +135,7 @@ export default {
     Menu,
     PathBreadcrumbs,
     PreviewPanel,
+    ProgressSpinner,
     TopBar
   },
   data() {
@@ -137,6 +145,7 @@ export default {
       busyRefresh: false,
       busyRestart: false,
       fatalError: false,
+      extractInProgress: false,
       activeItem: null,
       activeDirectoryItem: {},
       items: [],
@@ -354,7 +363,10 @@ export default {
       await this.directoryModel.download(buildFilePath(this.cwd, file.name));
     },
     async extractHandler(file) {
+      this.extractInProgress = true;
       await this.directoryModel.extract(buildFilePath(this.cwd, file.name));
+      await this.loadCwd();
+      this.extractInProgress = false;
     },
     async uploadHandler(targetDir, file, progressHandler) {
       await this.directoryModel.upload(targetDir, file, progressHandler);