app/pages/support/contact-us.vue

@@ -6,10 +6,9 @@
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
-    <div v-if="pending" class="page-content">
+    <div class="page-content">
-      <el-skeleton :rows="5" animated />
+      <el-skeleton :rows="10" :loading="pending" animated>
-    </div>
+        <template #default>
-    <div v-else class="page-content">
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="html-typography" v-html="contactInfo?.content || ''" />
           <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
@@ -19,6 +18,8 @@
           <!--     :html="contactInfo?.content || ''" -->
           <!--   /> -->
           <!-- </div> -->
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -31,7 +32,9 @@
     { label: $t('navigation.support'), to: localePath('/support') },
     { label: $t('navigation.contact-info') },
   ];
-  const { data: contactInfo, pending, error } = useContactInfo();
+  const { data, pending, error } = useContactInfo();
+
+  const contactInfo = computed(() => data.value ?? null);
 
   watch(error, (value) => {
     if (value) {

app/pages/support/documents.vue

@@ -6,8 +6,22 @@
         <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
-      <div v-if="pending" class="page-content">
+      <div class="page-content">
-        <el-skeleton :rows="10" animated class="py-4" throttle="100">
+        <document-filter
+          v-model="filters"
+          :product-type-options="productTypeOptions"
+          :product-options="productOptions"
+          :document-type-options="documentTypeOptions"
+        />
+
+        <el-skeleton
+          :loading="pending"
+          animated
+          :throttle="{
+            leading: 500,
+            trailing: 500,
+          }"
+        >
           <template #template>
             <div class="flex flex-col gap-xl">
               <el-skeleton-item
@@ -22,16 +36,7 @@
               />
             </div>
           </template>
-        </el-skeleton>
+          <template #default>
-      </div>
-      <div v-else class="page-content">
-        <document-filter
-          v-model="filters"
-          :product-type-options="productTypeOptions"
-          :product-options="productOptions"
-          :document-type-options="documentTypeOptions"
-        />
-
             <document-list
               :documents="paginatedDocuments"
               :show-category="
@@ -48,6 +53,8 @@
               :page-size="documentsPerPage"
               :total="filteredDocuments.length"
             />
+          </template>
+        </el-skeleton>
       </div>
     </div>
   </div>
@@ -71,7 +78,9 @@
   const page = ref(1);
   const documentsPerPage = 10;
 
-  const { data: documents, pending, error } = useDocumentList();
+  const { data, pending, error } = useDocumentList();
+
+  const documents = computed(() => data.value ?? []);
 
   const documentTypeOptions = computed(() => {
     const types: DocumentTypeView[] = [];

app/pages/support/faq.vue

@@ -6,25 +6,7 @@
       <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
-    <div v-if="pending" class="page-content">
+    <div class="page-content">
-      <el-skeleton :rows="10" animated class="py-4" throttle="100">
-        <template #template>
-          <div class="flex flex-col gap-xl">
-            <el-skeleton-item
-              variant="rect"
-              style="width: 100%; height: 100px"
-            />
-            <el-skeleton-item
-              v-for="i in 10"
-              :key="i"
-              variant="h1"
-              style="height: 60px"
-            />
-          </div>
-        </template>
-      </el-skeleton>
-    </div>
-    <div v-else class="page-content">
       <question-filter
         v-model="filters"
         :product-type-options="productTypeOptions"
@@ -32,6 +14,22 @@
         :question-type-options="questionTypeOptions"
       />
 
+      <el-skeleton
+        :loading="pending"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <div class="flex flex-col gap-xl">
+            <el-skeleton-item
+              v-for="i in 10"
+              :key="i"
+              variant="h1"
+              style="height: 80px"
+            />
+          </div>
+        </template>
+        <template #default>
           <question-list :questions="paginatedQuestions" />
 
           <el-pagination
@@ -42,6 +40,8 @@
             :page-size="questionsPerPage"
             :total="filteredQuestions.length"
           />
+        </template>
+      </el-skeleton>
     </div>
   </div>
 </template>
@@ -70,7 +70,9 @@
     { label: $t('navigation.faq') },
   ];
 
-  const { data: questions, pending, error } = useQuestionList();
+  const { data, pending, error } = useQuestionList();
+
+  const questions = computed(() => data.value ?? []);
 
   const questionTypeOptions = computed(() => {
     const types: QuestionTypeView[] = [];