Improve resources loading (#692)

* improve load forms

* improve load submissions

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

Author: chiragchhatrala

client/components/open/forms/components/FormSubmissions.vue

@@ -185,7 +185,6 @@ export default {
 
   data() {
     return {
-      currentPage: 1,
       fullyLoaded: false,
       showColumnsModal: false,
       properties: [],
@@ -290,18 +289,34 @@ export default {
         return
       }
       this.recordStore.startLoading()
-      opnFetch('/open/forms/' + this.form.id + '/submissions?page=' + this.currentPage).then((resData) => {
-        this.recordStore.save(resData.data.map((record) => record.data))
-        this.dataChanged()
-        if (this.currentPage < resData.meta.last_page) {
-          this.currentPage += 1
-          this.getSubmissionsData()
-        } else {
-          this.recordStore.stopLoading()
-          this.fullyLoaded = true
+      
+      opnFetch('/open/forms/' + this.form.id + '/submissions?page=1').then((firstResponse) => {
+        this.recordStore.save(firstResponse.data.map((record) => record.data))
+        
+        const lastPage = firstResponse.meta.last_page
+        
+        if (lastPage > 1) {
+          // Create an array of promises for remaining pages
+          const remainingPages = Array.from({ length: lastPage - 1 }, (_, i) => {
+            const page = i + 2 // Start from page 2
+            return opnFetch('/open/forms/' + this.form.id + '/submissions?page=' + page)
+          })
+          
+          // Fetch all remaining pages in parallel
+          return Promise.all(remainingPages)
         }
+        return []
+      }).then(responses => {
+        // Save all responses data
+        responses.forEach(response => {
+          this.recordStore.save(response.data.map((record) => record.data))
+        })
+        
+        this.fullyLoaded = true
+        this.recordStore.stopLoading()
+        this.dataChanged()
       }).catch(() => {
-        this.recordStore.startLoading()
+        this.recordStore.stopLoading()
       })
     },
     dataChanged() {

client/stores/forms.js

@@ -7,35 +7,58 @@ export const singleFormEndpoint = "/open/forms/{slug}"
 export const useFormsStore = defineStore("forms", () => {
   const contentStore = useContentStore("slug")
   const allLoaded = ref(false)
-  const currentPage = ref(1)
+  const loadAllRequest = ref(null)
 
   const loadAll = (workspaceId) => {
+    if (loadAllRequest.value) {
+      return loadAllRequest.value
+    }
+    if (!workspaceId) {
+      return
+    }
     contentStore.startLoading()
-    return opnFetch(formsEndpoint.replace("{workspaceId}", workspaceId), {
-      query: { page: currentPage.value },
-    })
-      .then((response) => {
-        if (currentPage.value === 1) {
+    
+    loadAllRequest.value = new Promise((resolve, reject) => {
+      opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId), { query: { page: 1 } })
+        .then(firstResponse => {
           contentStore.resetState()
-          contentStore.save(response.data)
-        } else {
-          contentStore.save(response.data)
-        }
-        if (currentPage.value < response.meta.last_page) {
-          currentPage.value++
-          loadAll(workspaceId)
-        } else {
+          contentStore.save(firstResponse.data)
+          
+          const lastPage = firstResponse.meta.last_page
+          
+          if (lastPage > 1) {
+            // Create an array of promises for remaining pages
+            const remainingPages = Array.from({ length: lastPage - 1 }, (_, i) => {
+              const page = i + 2 // Start from page 2
+              return opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId), { query: { page } })
+            })
+            
+            // Fetch all remaining pages in parallel
+            return Promise.all(remainingPages)
+          }
+          return []
+        })
+        .then(responses => {
+          // Save all responses data
+          responses.forEach(response => {
+            contentStore.save(response.data)
+          })
+          
           allLoaded.value = true
           contentStore.stopLoading()
-          currentPage.value = 1
-        }
-      })
-      .catch((error) => {
-        contentStore.stopLoading()
-        currentPage.value = 1
-        throw error
-      })
+          loadAllRequest.value = null
+          resolve()
+        })
+        .catch(err => {
+          contentStore.stopLoading()
+          loadAllRequest.value = null
+          reject(err)
+        })
+    })
+
+    return loadAllRequest.value
   }
+
   const loadForm = (slug) => {
     contentStore.startLoading()
     return opnFetch(singleFormEndpoint.replace("{slug}", slug))