app/pages/solutions/index.vue

@@ -8,7 +8,26 @@
 
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
-    <div v-if="!pending" class="solutions-container">
+    <div class="solutions-container">
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{
+          leading: 500,
+          trailing: 500,
+        }"
+      >
+        <template #template>
+          <div class="skeleton-group-list">
+            <el-skeleton-item
+              v-for="i in 12"
+              :key="i"
+              variant="rect"
+              class="skeleton-card"
+            />
+          </div>
+        </template>
+        <template #default>
           <el-tabs v-model="activeName" class="solutions-tabs">
             <el-tab-pane :label="$t('all')" name="all">
               <div class="solution-list">
@@ -40,9 +59,8 @@
               </div>
             </el-tab-pane>
           </el-tabs>
-    </div>
-    <div v-else>
-      <el-skeleton :rows="6" animated />
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -56,7 +74,9 @@
     { label: $t('navigation.solutions') },
   ];
 
-  const { data: solutions, pending, error } = await useSolutionList();
+  const { data, pending, error } = useSolutionList();
+
+  const solutions = computed(() => data.value ?? []);
 
   const activeName = ref<string>('all');
 
@@ -123,4 +143,34 @@
     margin-bottom: 2rem;
     gap: 40px;
   }
+
+  .skeleton-group-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .skeleton-card {
+    width: 30%;
+    height: 200px;
+  }
+
+  @media (max-width: 1200px) {
+    .skeleton-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .skeleton-group-list {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .skeleton-card {
+      width: 90%;
+    }
+  }
 </style>