Display buckets and their objects

Closes #5 (closed)

src/components/BucketListItem.vue

@@ -7,6 +7,7 @@ import fileSize from "filesize";
 const props = defineProps<{
   active: boolean;
   bucket: BucketOut;
+  loading: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -16,49 +17,57 @@ const emit = defineEmits<{
 
 <template>
   <div class="mt-2 mb-2">
-    <router-link
-      class="list-group-item list-group-item-action text-nowrap d-flex justify-content-between align-items-center"
-      :class="{
-        active: props.active,
-        rounded: !props.active,
-        'rounded-top': props.active,
-      }"
-      :aria-current="props.active"
-      :to="{
-        name: 'bucket',
-        params: { bucket_name: bucket.name, sub_folders: [] },
-      }"
-    >
-      {{ bucket.name }}
-      <bootstrap-icon
-        v-if="props.active"
-        icon="trash-fill"
-        :width="16"
-        :height="16"
-        fill="white"
-        @click="emit('delete-bucket', bucket.name)"
-      />
-    </router-link>
     <div
-      :hidden="!props.active"
-      class="ps-2 rounded-bottom bg-light text-bg-light"
+      v-if="loading"
+      class="list-group-item list-group-item-action text-nowrap rounded"
     >
-      <table class="table table-sm table-borderless">
-        <tbody>
-          <tr>
-            <th scope="row" class="fw-bold">Created:</th>
-            <td>{{ dayjs(bucket.created_at).fromNow() }}</td>
-          </tr>
-          <tr>
-            <th scope="row" class="fw-bold">Objects:</th>
-            <td>0</td>
-          </tr>
-          <tr>
-            <th scope="row" class="fw-bold">Size:</th>
-            <td>{{ fileSize(0) }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <span class="placeholder w-75"></span>
+    </div>
+    <div v-else>
+      <router-link
+        class="list-group-item list-group-item-action text-nowrap d-flex justify-content-between align-items-center"
+        :class="{
+          active: props.active,
+          rounded: !props.active,
+          'rounded-top': props.active,
+        }"
+        :aria-current="props.active"
+        :to="{
+          name: 'bucket',
+          params: { bucket_name: bucket.name, sub_folders: [] },
+        }"
+      >
+        {{ bucket.name }}
+        <bootstrap-icon
+          v-if="props.active"
+          icon="trash-fill"
+          :width="16"
+          :height="16"
+          fill="white"
+          @click="emit('delete-bucket', bucket.name)"
+        />
+      </router-link>
+      <div
+        :hidden="!props.active"
+        class="ps-2 rounded-bottom bg-light text-bg-light"
+      >
+        <table class="table table-sm table-borderless">
+          <tbody>
+            <tr>
+              <th scope="row" class="fw-bold">Created:</th>
+              <td>{{ dayjs(bucket.created_at).fromNow() }}</td>
+            </tr>
+            <tr>
+              <th scope="row" class="fw-bold">Objects:</th>
+              <td>0</td>
+            </tr>
+            <tr>
+              <th scope="row" class="fw-bold">Size:</th>
+              <td>{{ fileSize(0) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>