fix: mock unnnic skeleton loading

src/components/AppGrid/index.vue

@@ -91,7 +91,7 @@
         />
       </div>
     </section>
-    <!-- <skeleton-loading v-if="loading" /> -->
+    <skeleton-loading v-else />
 
     <unnnic-modal
       ref="unnnic-remove-modal"
@@ -131,7 +131,7 @@
   import unnnicCallAlert from '@weni/unnnic-system';
 
   import configModal from '../config/ConfigModal.vue';
-  // import skeletonLoading from '../loadings/AppGrid.vue';
+  import skeletonLoading from '../loadings/AppGrid.vue';
   import IntegrateButton from '../IntegrateButton/index.vue';
   import LoadingButton from '../LoadingButton/index.vue';
   import { avatarIcons, actionIcons, cardIcons } from '../../views/data/icons';
@@ -141,7 +141,7 @@
   import { storeToRefs } from 'pinia';
   export default {
     name: 'AppGrid',
-    components: { configModal, IntegrateButton, LoadingButton },
+    components: { configModal, IntegrateButton, LoadingButton, skeletonLoading },
     props: {
       section: {
         type: String,

src/components/Carousel/index.vue

@@ -25,19 +25,19 @@
       </template>
     </vueper-slides>
   </div>
-  <!-- <skeleton-loading /> -->
+  <skeleton-loading v-else />
 </template>
 
 <script>
-  // import skeletonLoading from '../loadings/Carousel.vue';
+  import skeletonLoading from '../loadings/Carousel.vue';
   import { VueperSlides, VueperSlide } from 'vueperslides';
   import 'vueperslides/dist/vueperslides.css';
   import { app_type } from '@/stores/modules/appType/appType.store';
   import { mapActions, mapState } from 'pinia';
 
   export default {
     name: 'Carousel',
-    components: { VueperSlides, VueperSlide },
+    components: { VueperSlides, VueperSlide, skeletonLoading },
     async mounted() {
       await this.fetchFeatured();
     },

src/components/config/bi_tools/power_bi/Config.vue

@@ -46,7 +46,7 @@
           </unnnic-toolTip>
         </template>
       </unnnic-data-area>
-      <unnnic-skeleton-loading v-else tag="div" width="100%" height="6rem" />
+      <skeleton-loading v-else tag="div" width="100%" height="6rem" />
 
       <div class="app-config-power-bi__content__download">
         <unnnic-label
@@ -96,9 +96,11 @@
   import PowerBiIcon from '@/assets/logos/power_bi.png';
   import { mapState, mapActions } from 'pinia';
   import { auth_store } from '@/stores/modules/auth.store';
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
 
   export default {
     name: 'PowerBiConfig',
+    components: { skeletonLoading },
     props: {
       app: {
         type: Object,

src/components/config/channels/generic/Config.vue

@@ -43,7 +43,7 @@
         :inputs="appFormInputs"
         @input="updateInputs"
       />
-      <unnnic-skeleton-loading
+      <skeleton-loading
         v-else
         class="app-config-generic__settings__content__form-loading"
         tag="div"
@@ -80,11 +80,13 @@
   import DynamicForm from '@/components/config/DynamicForm.vue';
   import { app_type } from '@/stores/modules/appType/appType.store';
   import { generic_store } from '@/stores/modules/appType/channels/generic.store';
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
 
   export default {
     name: 'generic-config',
     components: {
       DynamicForm,
+      skeletonLoading,
     },
     props: {
       app: {

src/components/config/channels/whatsapp/Config.vue

@@ -73,7 +73,7 @@
           <ConversationsTab :app="app" @close="closeConfig" />
         </template>
       </unnnic-tab>
-      <!-- <skeleton-loading v-else /> -->
+      <skeleton-loading v-else />
     </div>
   </div>
 </template>
@@ -83,7 +83,7 @@
   import ProfileTab from './components/tabs/ProfileTab.vue';
   import ConversationsTab from './components/tabs/ConversationsTab.vue';
   import WebhookTab from './components/tabs/WebhookTab.vue';
-  // import skeletonLoading from './loadings/Config.vue';
+  import skeletonLoading from './loadings/Config.vue';
   import { mapActions, mapState } from 'pinia';
   import { whatsapp_store } from '@/stores/modules/appType/channels/whatsapp.store';
   import { whatsapp_cloud } from '@/stores/modules/appType/channels/whatsapp_cloud.store';
@@ -98,6 +98,7 @@
       ProfileTab,
       ConversationsTab,
       WebhookTab,
+      skeletonLoading,
     },
     props: {
       app: {

src/components/config/channels/whatsapp/components/tabs/loadings/ProfileTab.vue

@@ -1,39 +1,32 @@
 <template>
   <div class="profile-loading">
-    <unnnic-skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
-    <unnnic-skeleton-loading
-      class="profile-loading__upload"
-      tag="div"
-      width="100%"
-      height="160px"
-    />
-    <unnnic-skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
-    <unnnic-skeleton-loading class="profile-loading__desc" tag="div" width="100%" height="48px" />
-    <unnnic-skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
-    <unnnic-skeleton-loading
-      class="profile-loading__company"
-      tag="div"
-      width="100%"
-      height="48px"
-    />
-    <unnnic-skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
+    <skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
+    <skeleton-loading class="profile-loading__upload" tag="div" width="100%" height="160px" />
+    <skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
+    <skeleton-loading class="profile-loading__desc" tag="div" width="100%" height="48px" />
+    <skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
+    <skeleton-loading class="profile-loading__company" tag="div" width="100%" height="48px" />
+    <skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
     <div class="profile-loading__websites">
-      <unnnic-skeleton-loading tag="div" width="100%" height="48px" />
-      <unnnic-skeleton-loading tag="div" width="100%" height="48px" />
+      <skeleton-loading tag="div" width="100%" height="48px" />
+      <skeleton-loading tag="div" width="100%" height="48px" />
     </div>
-    <unnnic-skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
+    <skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
     <div class="profile-loading__email">
-      <unnnic-skeleton-loading tag="div" width="100%" height="48px" />
+      <skeleton-loading tag="div" width="100%" height="48px" />
     </div>
-    <unnnic-skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
+    <skeleton-loading class="profile-loading__title" tag="div" width="20%" height="22px" />
     <div class="profile-loading__address">
-      <unnnic-skeleton-loading tag="div" width="100%" height="48px" />
+      <skeleton-loading tag="div" width="100%" height="48px" />
     </div>
   </div>
 </template>
 
 <script>
-  export default {};
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
+  export default {
+    components: { skeletonLoading },
+  };
 </script>
 
 <style lang="scss" scoped>

src/components/config/channels/whatsapp/loadings/Config.vue

@@ -2,19 +2,22 @@
   <div class="whatsapp-config-loading">
     <unnnic-tab></unnnic-tab>
     <div class="account">
-      <unnnic-skeleton-loading tag="div" width="100%" height="10vh" />
+      <skeleton-loading tag="div" width="100%" height="10vh" />
     </div>
     <div class="channel">
-      <unnnic-skeleton-loading tag="div" width="100%" height="30vh" />
+      <skeleton-loading tag="div" width="100%" height="30vh" />
     </div>
     <div class="waba">
-      <unnnic-skeleton-loading tag="div" width="100%" height="28vh" />
+      <skeleton-loading tag="div" width="100%" height="28vh" />
     </div>
   </div>
 </template>
 
 <script>
-  export default {};
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
+  export default {
+    components: { skeletonLoading },
+  };
 </script>
 
 <style lang="scss" scoped>

src/components/config/channels/whatsapp/loadings/PhoneNumberSelection.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="whatsapp-phone-number-loading">
-    <unnnic-skeleton-loading
-      class="whatsapp-phone-number-loading__content"
-      tag="div"
-      height="38px"
-    />
+    <skeleton-loading class="whatsapp-phone-number-loading__content" tag="div" height="38px" />
   </div>
 </template>
 
 <script>
-  export default {};
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
+  export default {
+    components: { skeletonLoading },
+  };
 </script>
 
 <style lang="scss" scoped>

src/components/config/ecommerce/vtex/Config.vue

@@ -43,7 +43,7 @@
               <td>{{ $t('vtex.config.wpp_number') }}</td>
               <td v-if="wpp_number">{{ wpp_number }}</td>
               <td v-else>
-                <unnnic-skeleton-loading tag="div" width="100%" height="22px" />
+                <skeleton-loading tag="div" width="100%" height="22px" />
               </td>
             </tr>
             <tr>
@@ -81,10 +81,11 @@
   import { app_type } from '@/stores/modules/appType/appType.store';
   import unnnicCallAlert from '@weni/unnnic-system';
   import ConnectCatalogModalContent from './ConnectCatalogModalContent.vue';
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
 
   export default {
     name: 'vtex-config',
-    components: { ConnectCatalogModalContent },
+    components: { ConnectCatalogModalContent, skeletonLoading },
     props: {
       app: {
         type: Object,

src/components/config/ecommerce/vtex/Setup.vue

@@ -22,7 +22,7 @@
               v-model="selectedChannel"
               :options="whatsappChannels"
             />
-            <unnnic-skeleton-loading v-else tag="div" width="100%" height="42px" />
+            <skeleton-loading v-else tag="div" width="100%" height="42px" />
           </div>
 
           <unnnic-input
@@ -180,11 +180,13 @@
   import unnnicCallAlert from '@weni/unnnic-system';
   import StepIndicator from '../../../StepIndicator.vue';
   import getEnv from '../../../../utils/env';
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
 
   export default {
     name: 'VtexModal',
     components: {
       StepIndicator,
+      skeletonLoading,
     },
     props: {
       app: {

src/components/config/external/chatgpt/Config.vue

@@ -63,12 +63,7 @@
               v-if="availablePrompts.length > 0 && !loadingGetPrompts"
               :label="$t('ChatGPT.config.tabs.flows.prompts_list')"
             />
-            <unnnic-skeleton-loading
-              v-else-if="loadingGetPrompts"
-              tag="div"
-              height="25px"
-              width="75px"
-            />
+            <skeleton-loading v-else-if="loadingGetPrompts" tag="div" height="25px" width="75px" />
             <div class="config-chatgpt__settings__content__prompts-wrapper">
               <unnnic-toolTip
                 v-for="(prompt, index) in availablePrompts"
@@ -164,9 +159,11 @@
   import { auth_store } from '@/stores/modules/auth.store';
   import { app_type } from '@/stores/modules/appType/appType.store';
   import { externals_store } from '@/stores/modules/appType/externals/externals.store';
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
 
   export default {
     name: 'chatgpt-config',
+    components: { skeletonLoading },
     props: {
       app: {
         type: Object,

src/components/loadings/AppGrid.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="title">
-      <unnnic-skeleton-loading tag="div" width="40px" height="40px" />
-      <unnnic-skeleton-loading tag="div" width="208px" height="40px" />
+      <skeleton-loading tag="div" width="40px" height="40px" />
+      <skeleton-loading tag="div" width="208px" height="40px" />
     </div>
     <div class="grid">
-      <unnnic-skeleton-loading
+      <skeleton-loading
         v-for="index in 4"
         :key="index"
         class="grid__item"
@@ -18,8 +18,10 @@
 </template>
 
 <script>
-  // import SkeletonLoading from '../Skeleton/SkeletonLoading.vue';
-  export default {};
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
+  export default {
+    components: { skeletonLoading },
+  };
 </script>
 
 <style lang="scss" scoped>

src/components/whatsAppTemplates/loadings/FormHeaderLoading.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="loading">
-    <unnnic-skeleton-loading width="40px" height="40px" />
-    <unnnic-skeleton-loading width="120px" height="40px" />
+    <skeleton-loading width="40px" height="40px" />
+    <skeleton-loading width="120px" height="40px" />
 
-    <unnnic-skeleton-loading width="80px" height="20px" />
+    <skeleton-loading width="80px" height="20px" />
   </div>
 </template>
 
 <script>
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
+
   export default {
     name: 'FormHeaderLoading',
+    components: { skeletonLoading },
   };
 </script>
 

src/components/whatsAppTemplates/loadings/TableHeaderLoading.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="loading">
-    <unnnic-skeleton-loading width="40px" height="40px" />
-    <unnnic-skeleton-loading width="120px" height="40px" />
+    <skeleton-loading width="40px" height="40px" />
+    <skeleton-loading width="120px" height="40px" />
   </div>
 </template>
 <script>
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
   export default {
     name: 'TableHeaderLoading',
+    components: { skeletonLoading },
   };
 </script>
 <style lang="scss" scoped>

src/components/whatsAppTemplates/loadings/TableLoading.vue

@@ -8,15 +8,17 @@
         <unnnic-table-row :headers="headers" />
       </template>
       <template v-slot:item="{ item }">
-        <unnnic-skeleton-loading width="100%" height="64px" :item="item" />
+        <skeleton-loading width="100%" height="64px" :item="item" />
       </template>
     </unnnic-table>
   </div>
 </template>
 
 <script>
+  import skeletonLoading from '@/components/Skeleton/SkeletonLoading.vue';
   export default {
     name: 'TableLoading',
+    components: { skeletonLoading },
     props: {
       headers: {
         type: Array,