From 738a50cebe402375de3d538a4795388fd63d2371 Mon Sep 17 00:00:00 2001
From: Riddhi Sera <sera.1@iitj.ac.in>
Date: Sat, 6 Mar 2021 22:54:31 +0530
Subject: [PATCH] added skeleton loaders

---
 src/views/OfficeBearers.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/views/OfficeBearers.vue b/src/views/OfficeBearers.vue
index 548ebbe3..3151ab29 100644
--- a/src/views/OfficeBearers.vue
+++ b/src/views/OfficeBearers.vue
@@ -1,17 +1,22 @@
-<template lang="pug">
-  v-content.justify-center(justify-center v-if="!$apollo.queries.societies.loading")
-    v-card.text-center(class="blue text-center mx-auto" max-width="800").mt-4
+<template lang="pug" v-slot:placeholder>
+  v-content.justify-center()
+    v-card.text-center(class="blue text-center mx-auto" max-width="800" v-if="!$apollo.queries.societies.loading").mt-4 
       v-card-text(class="white--text")
-        h1.font-weight-regular Office Bearers
+        h1.font-weight-regular Office Bearers 
+    v-skeleton-loader(v-else loading="loading" type="heading" align="center" tile)
     v-container(v-for="({ node }, i) in societies.edges" :key="i" v-if=" node.mentor || node.secretary || node.jointSecretary ")
       v-card-title.display-1.justify-center {{ node.name }}
+      v-skeleton-loader(v-if="$apollo.queries.societies.loading" loading="loading" type="heading" align="center" tile)
       v-row.justify-space-around(v-if=" node.mentor || node.secretary || node.jointSecretary ")
         v-col(cols="12" lg="4" sm="6" v-if="node.mentor")
-          OfficeBearerCard(:avatarSize="120" :profile="node.mentor" :designation="'Mentor'")
+          OfficeBearerCard(:avatarSize="120" :profile="node.mentor" :designation="'Mentor'" v-if="!$apollo.queries.societies.loading" )
+          v-skeleton-loader(v-else loading="loading" type="card-avatar, actions")
         v-col(cols="12" lg="4" sm="6" v-if="node.secretary")
-          OfficeBearerCard(:avatarSize="120" :profile="node.secretary" :designation="'Secretary'")
+          OfficeBearerCard(:avatarSize="120" :profile="node.secretary" :designation="'Secretary'" v-if="!$apollo.queries.societies.loading")
+          v-skeleton-loader(v-else loading="loading" type="card-avatar, actions")
         v-col(cols="12" lg="4" sm="6" v-if="node.jointSecretary")
-          OfficeBearerCard(:avatarSize="120" :profile="node.jointSecretary" :designation="'Joint Secretary'")
+          OfficeBearerCard(:avatarSize="120" :profile="node.jointSecretary" :designation="'Joint Secretary'" v-if="!$apollo.queries.societies.loading")
+          v-skeleton-loader(v-else loading="loading" type="card-avatar, actions")
 </template>
 
 <script>