reparation drag and drop zip

src/components/WebContentViewer.vue

@@ -4,7 +4,7 @@
             <div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
             <div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
         </div>
-        <div class="overflow-y-auto">
+        <div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto">
             <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
 
                 <div
@@ -66,6 +66,12 @@
 
             </div>
         </div>
+        <div v-if="isLoading" class="flex h-full items-center justify-center">
+            <component :is="Loading" class="text-white w-24 h-24 animate-spin" size="48" />
+        </div>
+        <div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center">
+            <span class="text-gray-500">Aucun contenu à afficher</span>
+        </div>
     </div>
 </template>
 
@@ -73,6 +79,8 @@
 import JSZip from 'jszip';
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
+import Loading from 'vue-material-design-icons/Loading.vue';
+import { ref } from 'vue';
 
 export default {
     name: 'WebContentViewer',
@@ -83,7 +91,9 @@ export default {
             archiveUrl: '',
             token: '',
             ChevronRightIcon,
-            ChevronDownIcon
+            ChevronDownIcon,
+            isLoading: ref(false),
+            Loading,
         };
     },
     props: {
@@ -120,6 +130,7 @@ export default {
         },
     },
     async mounted() {
+        this.isLoading = true;
         await this.loadZipContent();
         const webTransferDiv = document.getElementById('archiveInfos');
         if (webTransferDiv) {
@@ -128,6 +139,7 @@ export default {
         } else {
             console.error('Pas d\'informations pour recuperer l\'archive');
         }
+        this.isLoading = false;
     },
     methods: {
         async loadZipContent() {

src/output.css

@@ -639,6 +639,10 @@ video {
   height: 100%;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -675,12 +679,12 @@ video {
   width: 100%;
 }
 
-.max-w-32 {
+.w-16 {
-  max-width: 8rem;
+  width: 4rem;
 }
 
-.max-w-48 {
+.w-24 {
-  max-width: 12rem;
+  width: 6rem;
 }
 
 .max-w-64 {
@@ -691,6 +695,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }