fix skeleton styles

argilla-io · Aug 8, 2024 · 2cde329 · 2cde329
1 parent 155f216
commit 2cde329
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 85 deletions.
diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
@@ -18,18 +18,17 @@
 <template>
   <div class="my-progress__container">
     <TeamProgress :datasetId="datasetId" />
-
-    <BaseBadgeSkeleton v-if="!metrics.hasMetrics" />
-    <li v-else class="my-progress__item">
-      <span>
-        <span
-          class="color-bullet"
-          :style="{ backgroundColor: RecordStatus.submitted.color }"
-        ></span>
-        <label class="my-progress__name" v-text="RecordStatus.submitted.name" />
-      </span>
-      <span class="my-progress__counter" v-text="metrics.submitted" />
-    </li>
+    <StatusCounterSkeleton
+      v-if="!metrics.hasMetrics"
+      class="my-progress__status--skeleton"
+    />
+    <StatusCounter
+      v-else
+      class="my-progress__status"
+      :color="RecordStatus.submitted.color"
+      :name="RecordStatus.submitted.name"
+      :value="metrics.submitted"
+    />
   </div>
 </template>
 
@@ -56,15 +55,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$bullet-size: 8px;
-.color-bullet {
-  display: inline-flex;
-  height: $bullet-size;
-  width: $bullet-size;
-  margin-right: 4px;
-  border-radius: $border-radius-rounded;
-}
-
+$statusCounterMinWidth: 110px;
+$statusCounterMinHeight: 30px;
 .my-progress {
   &__container {
     width: 100%;
@@ -73,24 +65,11 @@ $bullet-size: 8px;
     justify-content: space-between;
     margin-right: $base-space * 2;
   }
-  &__item {
-    display: flex;
-    flex-direction: row;
-    gap: $base-space;
-    padding: $base-space;
-    width: auto;
-    background: $black-3;
-    border-radius: $border-radius;
-  }
-  &__name {
-    text-transform: capitalize;
-    color: $black-54;
-    @include font-size(12px);
-  }
-  &__counter {
-    font-weight: 600;
-    color: $black-87;
-    @include font-size(14px);
+  &__status {
+    &--skeleton {
+      min-width: $statusCounterMinWidth;
+      min-height: $statusCounterMinHeight;
+    }
   }
 }
 </style>
diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue
@@ -19,29 +19,21 @@
   <div>
     <ul class="my-progress__list">
       <template v-if="!metrics.hasMetrics">
-        <li
+        <StatusCounterSkeleton
           v-for="(status, index) in progressItems"
           :key="index"
-          class="my-progress__list__item"
-        >
-          <BaseBadgeSkeleton />
-        </li>
+          class="my-progress__status--skeleton"
+        />
       </template>
       <template v-else>
-        <li
+        <StatusCounter
           v-for="(status, index) in progressItems"
           :key="index"
-          class="my-progress__list__item"
-        >
-          <span>
-            <span
-              class="color-bullet"
-              :style="{ backgroundColor: status.color }"
-            ></span>
-            <label class="my-progress__list__name" v-text="status.name" />
-          </span>
-          <span class="my-progress__list__counter" v-text="status.value" />
-        </li>
+          class="my-progress__status"
+          :color="status.color"
+          :name="status.name"
+          :value="status.value"
+        />
       </template>
     </ul>
     <p class="team-progress__title" v-text="$t('metrics.progress.team')" />
@@ -105,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$bullet-size: 8px;
+$statusCounterMinHeight: 60px;
 .my-progress {
   display: flex;
   align-items: center;
@@ -123,39 +115,23 @@ $bullet-size: 8px;
     font-weight: 500;
   }
 }
-.color-bullet {
-  display: inline-flex;
-  height: $bullet-size;
-  width: $bullet-size;
-  margin-right: 4px;
-  border-radius: $border-radius-rounded;
-}
 
-.my-progress__list {
-  display: flex;
-  list-style: none;
-  gap: $base-space;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: $base-space * 3;
-  &__item {
-    background: $black-3;
+.my-progress {
+  &__list {
     display: flex;
-    flex-direction: column;
+    list-style: none;
     gap: $base-space;
-    padding: $base-space;
-    width: 100%;
-    border-radius: $border-radius;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: $base-space * 3;
   }
-  &__name {
-    text-transform: capitalize;
-    color: $black-54;
-    @include font-size(12px);
+  &__status.status-counter {
+    flex-direction: column;
+    width: 100%;
   }
-  &__counter {
-    font-weight: 600;
-    color: $black-87;
-    @include font-size(14px);
+  &__status--skeleton {
+    @extend .my-progress__status;
+    height: $statusCounterMinHeight;
   }
 }
 </style>
diff --git a/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue b/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounter.vue
@@ -0,0 +1,58 @@
+<template>
+  <li class="status-counter">
+    <span>
+      <span class="color-bullet" :style="{ backgroundColor: color }"></span>
+      <label class="status-counter__name" v-text="name" />
+    </span>
+    <span class="status-counter__counter" v-text="value" />
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+$bullet-size: 8px;
+.color-bullet {
+  display: inline-flex;
+  height: $bullet-size;
+  width: $bullet-size;
+  margin-right: 4px;
+  border-radius: $border-radius-rounded;
+}
+.status-counter {
+  display: flex;
+  flex-direction: row;
+  gap: $base-space;
+  padding: $base-space;
+  background: $black-3;
+  border-radius: $border-radius;
+
+  &__name {
+    text-transform: capitalize;
+    color: $black-54;
+    @include font-size(12px);
+  }
+  &__counter {
+    font-weight: 600;
+    color: $black-87;
+    @include font-size(14px);
+  }
+}
+</style>
diff --git a/...frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue b/...frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="status-counter"></div>
+</template>
+
+<style scoped lang="scss">
+$progressBackgroundColor: #f2f2f2;
+.status-counter {
+  background: $black-3;
+  border-radius: $border-radius;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: skeletonBg;
+  animation-timing-function: cubic-bezier(0.2, 0.7, 0.8, 0.7);
+  background: linear-gradient(
+    to right,
+    $progressBackgroundColor 0%,
+    darken($progressBackgroundColor, 3%) 50%,
+    $progressBackgroundColor 100%
+  );
+  background-size: 200% 100%;
+
+  @keyframes skeletonBg {
+    0% {
+      background-position: 100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+}
+</style>