atom-nuxt 1.4.3 → 1.4.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomengine/atom-nuxt",
   "configKey": "atomNuxt",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -246,6 +246,7 @@ const dialogOpen = computed({
 });
 const page = computed(() => props.loaderKey ? parseQuery(route.query[props.loaderKey])?.page ?? 1 : route.query.page ?? 1);
 const filterValues = props.loaderKey ? ref({ ...props.customFilters, ...parseQuery(route.query[props.loaderKey]) }) : ref({ ...props.customFilters, ...route.query });
+const isInitialLoad = ref(true);
 const onQueryChange = (page2) => {
   console.error("QUERY CHANGED");
   const newQuery = {};
@@ -289,6 +290,11 @@ watch(() => filterValues, () => {
   console.error("ROUTE CHANGED");
   debouncedGet();
 }, { deep: true });
+watch(listPending, (isPending) => {
+  if (!isPending && isInitialLoad.value) {
+    isInitialLoad.value = false;
+  }
+});
 const debouncedGet = useDebounceFn(() => {
   console.error("DEBOUNCED GET");
   getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
@@ -466,43 +472,59 @@ const exportAction = async () => {
     <div :class="contentClasses">
       <v-progress-linear :active="listPending" indeterminate color="primary"></v-progress-linear>
       <v-row>
-        <v-col v-if="!hideFilters && filters.length > 0" cols="12" md="3">
+        <v-col v-if="!hideFilters && (filters.length > 0 || isInitialLoad)" cols="12" md="3">
           <div>
-            <slot name="filtersTitle">
-              <h3 v-if="filtersTitle" class="mb-2">{{ filtersTitle }}</h3>
-            </slot>
-            <slot name="filters" :filters="filters">
-              <div :class="filterClasses">
-                <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
-              </div>
-            </slot>
+            <div v-if="isInitialLoad">
+              <v-skeleton-loader
+                type="heading, list-item, list-item, list-item"
+                class="mb-3"
+              ></v-skeleton-loader>
+            </div>
+            <template v-else>
+              <slot name="filtersTitle">
+                <h3 v-if="filtersTitle" class="mb-2">{{ filtersTitle }}</h3>
+              </slot>
+              <slot name="filters" :filters="filters">
+                <div :class="filterClasses">
+                  <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
+                </div>
+              </slot>
+            </template>
           </div>
         </v-col>
-        <v-col cols="12" :md="hideFilters || filters.length === 0 ? '12' : '9'">
+        <v-col cols="12" :md="hideFilters || (filters.length === 0 && !isInitialLoad) ? '12' : '9'">
           <div class="">
-            <slot name="resultsTitle">
-              <h3 v-if="resultsTitle" class="mb-2">{{ resultsTitle }}</h3>
-            </slot>
-            <slot v-if="!listPending && totalItems === 0 && !hasListErrors" name="empty" :create-action="createForm">
-              <v-alert icon="mdi-playlist-remove" type="info" class="pa-5">
-                {{ noResultsText }}
-              </v-alert>
-            </slot>
-            <slot v-if="hasListErrors" name="error" :errors="listErrors">
-              <crud-error-display :errors="listErrors"></crud-error-display>
-            </slot>
-            <div :class="resultClasses">
-              <slot
-                v-if="totalItems > 0"
-                :items="items"
-                :pending="listPending"
-                :update-action="updateForm"
-                :view-action="viewForm"
-                :delete-action="deleteForm"
-                :form-pending="formPending"
-              >
-              </slot>
+            <div v-if="isInitialLoad">
+              <v-skeleton-loader
+                type="heading, card, card, card"
+                class="mb-3"
+              ></v-skeleton-loader>
             </div>
+            <template v-else>
+              <slot name="resultsTitle">
+                <h3 v-if="resultsTitle" class="mb-2">{{ resultsTitle }}</h3>
+              </slot>
+              <slot v-if="!listPending && totalItems === 0 && !hasListErrors" name="empty" :create-action="createForm">
+                <v-alert icon="mdi-playlist-remove" type="info" class="pa-5">
+                  {{ noResultsText }}
+                </v-alert>
+              </slot>
+              <slot v-if="hasListErrors" name="error" :errors="listErrors">
+                <crud-error-display :errors="listErrors"></crud-error-display>
+              </slot>
+              <div :class="resultClasses">
+                <slot
+                  v-if="totalItems > 0"
+                  :items="items"
+                  :pending="listPending"
+                  :update-action="updateForm"
+                  :view-action="viewForm"
+                  :delete-action="deleteForm"
+                  :form-pending="formPending"
+                >
+                </slot>
+              </div>
+            </template>
           </div>
           <div v-if="totalItems > 0 && totalPages > 1" class="pa-3">
             <span class="d-none d-md-block pa-3">Page {{ currentPage }} of {{ totalPages }} pages with {{ totalItems }} items</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom-nuxt",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "My new Nuxt module",
   "repository": "atomengine/atom-nuxt",
   "license": "MIT",