add skeleton loadings to recent activities

weni-ai · Nov 10, 2023 · 1cbe1b5 · 1cbe1b5
1 parent 7c04390
commit 1cbe1b5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@sentry/integrations": "^5.29.2",
     "@vue-stripe/vue-stripe": "^4.2.9",
     "@vue/web-component-wrapper": "^1.2.0",
-    "@weni/unnnic-system": "^1.16.61",
+    "@weni/unnnic-system": "^1.16.70",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dotenv": "^9.0.2",

diff --git a/src/views/ProjectHomeBlank/QuickAccess.vue b/src/views/ProjectHomeBlank/QuickAccess.vue
@@ -82,23 +82,31 @@
     <div class="lastest-activities u bg-neutral-snow">
       <div :style="{ flex: 1, position: 'relative' }">
         <div class="content">
-          <div v-for="(activity, index) in activities" :key="index">
-            <span
-              class="u font secondary body-md color-neutral-darkest"
-              v-html="
-                $t(
-                  `home.quick_access.lastest_activities.actions.${activity.action}`,
-                  activity,
-                )
-              "
-            ></span>
-
-            <span
-              class="u font secondary body-sm color-neutral-cloudy upper-case"
-            >
-              {{ fromNow(activity.created_at) }}
-            </span>
-          </div>
+          <template v-if="loading">
+            <div v-for="(n, index) in 4" :key="index">
+              <unnnic-skeleton-loading tag="span" height="20px" width="190px" />
+              <unnnic-skeleton-loading tag="span" height="16px" width="45px" />
+            </div>
+          </template>
+          <template v-else>
+            <div v-for="(activity, index) in activities" :key="index">
+              <span
+                class="u font secondary body-md color-neutral-darkest"
+                v-html="
+                  $t(
+                    `home.quick_access.lastest_activities.actions.${activity.action}`,
+                    activity,
+                  )
+                "
+              ></span>
+
+              <span
+                class="u font secondary body-sm color-neutral-cloudy upper-case"
+              >
+                {{ fromNow(activity.created_at) }}
+              </span>
+            </div>
+          </template>
         </div>
       </div>
     </div>
@@ -121,10 +129,12 @@ export default {
       addingAuthorization: false,
 
       activities: [],
+      loading: false,
     };
   },
 
   created() {
+    this.loading = true;
     projects
       .latestActivities({
         projectUuid: this.$store.getters.currentProject.uuid,
@@ -151,6 +161,7 @@ export default {
             ({ action, name }) =>
               !(action === 'edited-channel' && name?.startsWith?.('WhatsApp')),
           );
+        this.loading = false;
       });
   },
 

diff --git a/yarn.lock b/yarn.lock
@@ -2159,10 +2159,10 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@weni/unnnic-system@^1.16.61":
-  version "1.16.61"
-  resolved "https://registry.yarnpkg.com/@weni/unnnic-system/-/unnnic-system-1.16.61.tgz#29da022d99d70a144d0cae42f0f18468fe2ef099"
-  integrity sha512-bUx4BBmVltnfBA1VYTCeJh6Z2AoogXlzmiuFJEa/mlFtIHboDqVbCIqQoiwunGW9cgnvGoSD1w8u9/wxDWTdmg==
+"@weni/unnnic-system@^1.16.70":
+  version "1.16.70"
+  resolved "https://registry.yarnpkg.com/@weni/unnnic-system/-/unnnic-system-1.16.70.tgz#6081337a16847b068f31b074b813f6a9fee03e9e"
+  integrity sha512-RAS4mJrSn9cyhbUeZ6dIJtXdV+c6OWSgnJ/6BLaR5CmZuEzUTiDapabRFyceM8VE6mryvRAfzDWH82aQx+njwA==
   dependencies:
     core-js "^3.6.5"
     lodash "^4.17.21"