add loading indicator

This commit is contained in:
Salem Yaslem 2023-05-19 18:09:48 +03:00
parent a0c54f867c
commit 81e5d9d966

25
app.vue
View File

@ -11,18 +11,21 @@ Archive.init({
let display = useDisplay(); let display = useDisplay();
let drawer = ref(!display.xs.value); let drawer = ref(!display.xs.value);
let loadingModel = ref(false);
let files = ref([]); let files = ref([]);
let filesList = ref<any>([]); let filesList = ref<any>([]);
let selectedItem = useSelectedItem(); let selectedItem = useSelectedItem();
let filesGridList = ref<any>([])
let selectedList = ref<any>([])
watchEffect(async () => { watchEffect(async () => {
if (files.value?.[0]) { if (files.value?.[0]) {
loadingModel.value = true;
filesList.value = []; filesList.value = [];
const archive = await Archive.open(files.value[0]); const archive = await Archive.open(files.value[0]);
// console.log(await archive.getFilesObject())
let extractedFiles = await archive.getFilesObject(); let extractedFiles = await archive.getFilesObject();
let getContent = (fileList: any, path = ''): any => { let getContent = (fileList: any, path = ''): any => {
@ -39,6 +42,7 @@ watchEffect(async () => {
filesList.value = getContent(extractedFiles)?.sort((a: any, b: any) => { filesList.value = getContent(extractedFiles)?.sort((a: any, b: any) => {
return b.isFolder - a.isFolder return b.isFolder - a.isFolder
}); });
loadingModel.value = false;
} }
}) })
@ -89,9 +93,6 @@ function getFile(path: string, innerList = undefined): any {
return undefined; return undefined;
} }
let filesGridList = ref<any>([])
let selectedList = ref<any>([])
watchEffect(() => { watchEffect(() => {
filesGridList.value = getFile(selectedItem.value)?.content || []; filesGridList.value = getFile(selectedItem.value)?.content || [];
selectedList.value = []; selectedList.value = [];
@ -194,6 +195,22 @@ function onSelectEnd(e: any) {
</v-container> </v-container>
</template> </template>
</v-main> </v-main>
<v-dialog
v-model="loadingModel"
persistent
width="auto"
>
<v-card>
<v-card-text>
Please stand by
<v-progress-linear
indeterminate
color="light-blue-darken-1"
class="mb-0"
></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
</v-layout> </v-layout>
</template> </template>
<style> <style>