From a1cb144ef608bd438b9551260d82df4fc87c3424 Mon Sep 17 00:00:00 2001
From: Riddhi Sera <sera.1@iitj.ac.in>
Date: Sat, 6 Mar 2021 23:31:08 +0530
Subject: [PATCH] added skeleton loaders(1)

---
 src/plugins/vue-apollo.js   |  5 +++--
 src/views/Club.vue          | 25 +++++++++++++++++--------
 src/views/Home.vue          | 34 ++++++++++++++++++++++------------
 src/views/OfficeBearers.vue |  2 +-
 4 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/plugins/vue-apollo.js b/src/plugins/vue-apollo.js
index 1810f8d..0b21483 100644
--- a/src/plugins/vue-apollo.js
+++ b/src/plugins/vue-apollo.js
@@ -12,7 +12,8 @@ Vue.use(VueApollo);
 const AUTH_TOKEN = "apollo-token";
 
 // Http endpoint
-const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || "/graphql";
+const httpEndpoint =
+  process.env.VUE_APP_GRAPHQL_HTTP || "http://127.0.0.1:8000/graphql";
 
 // Config
 const defaultOptions = {
@@ -49,7 +50,7 @@ const defaultOptions = {
   // clientState: { resolvers: { ... }, defaults: { ... } }
 };
 const pgGraphql = {
-  httpEndpoint: "/pgraphql"
+  httpEndpoint: "http://127.0.0.1:8000/pgraphql"
 };
 // Call this in the Vue app file
 export function createProvider(options = {}) {
diff --git a/src/views/Club.vue b/src/views/Club.vue
index 4475933..6653dc5 100644
--- a/src/views/Club.vue
+++ b/src/views/Club.vue
@@ -1,19 +1,20 @@
 <template lang="pug">
-  v-flex(v-if="!$apollo.queries._clubs.loading")
+  v-flex()
     v-parallax(
       dark
       :src="club.cover.sizes.length ? club.cover.sizes.find(e => e.name === 'full_size').url : require('../assets/home5.jpg') "
       :height="$vuetify.theme.options.parallaxHeight * 1.3"
     ).topbar-style
-      v-layout.justify-center.align-center.fill-height
+      v-layout.justify-center.align-center.fill-height(v-if="!$apollo.queries._clubs.loading")
         h1 {{ club.name }}
+      v-skeleton-loader(v-else loading="loading" type="heading" align="center" tile)
     v-container.pa-4
       v-row(:style="{'margin-top': `-${ $vuetify.theme.options.parallaxHeight / 3.5 }px`}").justify-center
         v-col(sm="10" md="8")
           v-card(
             :style="{'border-top': `8px solid ${ $vuetify.theme.themes.light.primary }`}"
           ).pa-5.elevation-8
-            v-card-title.display-1.font-weight-light About
+            v-card-title.display-1.font-weight-light About            
             v-card-text
               span(v-html="club.description")
             v-card-actions(v-if="club.resourcesLink").justify-end
@@ -24,15 +25,17 @@
       v-layout(row)
         v-flex.md4
           v-card(flat tile text).background-color
-            v-card-title.headline.justify-center
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" loading="loading" type="list-item-avatar-three-line" align="center" tile)
+            v-card-title.headline.justify-center(v-else)
               v-icon(left large) mdi-lightbulb-outline
               | Upcoming Event
             v-card-text(v-if="club.eventSet.edges.length")
               EventTable(:eventsList="club.eventSet.edges")
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="text" tile)
             v-card-text(v-else).text-center.subtitle-1.ml-2 There are currently no events.
         v-flex.md7.offset-md1.elevation-0(flat tile depressed).pl-md-5.xs12
-          v-card-title.headline.justify-center
-            v-icon(left large) mdi-newspaper-plus
+          v-card-title.headline.justify-center()
+            v-icon(left large ) mdi-newspaper-plus
             | Activities and News
           v-tabs(fixed-tabs background-color='primary lighten-1' dark v-model="tab")
             v-tab
@@ -43,7 +46,7 @@
           v-tabs-items(v-model="tab" )
             v-tab-item(v-if="club.activitySet.edges.length" )
               ActivityComponent(:activitiesList="club.activitySet.edges" )
-            v-tab-item(v-else ).pa-8.text-center.title.background-color There are no activities.
+            v-tab-item(v-else).pa-8.text-center.title.background-color There are no activities.
             v-tab-item
               v-card(flat tile text ).pa-4.background-color
                 v-card-text(v-if="club.newsSet.edges.length")
@@ -57,19 +60,25 @@
         v-row.justify-space-around
           v-flex(v-if="club.captain").md4.xs12
             CaptainComponent(:profile="club.captain" :designation="'Captain'")
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="card-avatar")
           v-flex(v-if="club.viceCaptainOne").md4.xs12
             CaptainComponent(:profile="club.viceCaptainOne" :designation="'Vice Captain'")
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="card-avatar")
           v-flex(v-if="club.viceCaptainTwo").md4.xs12
             CaptainComponent(:profile="club.viceCaptainTwo" :designation="'Vice Captain'")
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="card-avatar")
           v-flex(v-if="club.viceCaptainThree").md4.xs12
             CaptainComponent(:profile="club.viceCaptainThree" :designation="'Vice Captain'")
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="card-avatar")
           v-flex(v-if="club.mentor").md4.xs12
             CaptainComponent(:profile="club.mentor" :designation="'Mentor'")
+            v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="card-avatar")
     v-container.pa-5(v-if="club.customHtml")
       span(v-html="club.customHtml")
     v-container.pa-8(v-if="club.coreMembers.edges.length" fluid)
       v-flex.md8.offset-md2
-        v-card(class="accent white--text").elevation-10
+        v-skeleton-loader(v-if="$apollo.queries._clubs.loading" type="card-avatar@2")
+        v-card(v-else class="accent white--text").elevation-10
           v-card-title.justify-center.display-1 Volunteers
       v-row.justify-space-around
         v-col(cols="12" md="6" lg="4" v-for="({ node }, j) in club.coreMembers.edges" :key="j")
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7ca136d..51101dd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,6 +8,7 @@
       cycle
       hide-delimiter-background
       show-arrows-on-hover
+
     ).topbar-margin
       v-carousel-item(
         v-for="({node}, i) in homeCarousel.photos.edges"
@@ -22,21 +23,25 @@
             transition="fade-transition"
           ).white--text.text-center.font-weight-light.topbar-margin
             v-flex Students' Gymkhana
-            v-flex IIT Jodhpur
+            v-flex IIT Jodhpur 
     v-container.pa-10
       v-row
-        v-col
-          h1.mb-2.display-1.text-center About Students' Gymkhana
+        v-col()
+          v-skeleton-loader(v-if="$apollo.queries.societies.loading" loading="loading" type="heading" align="center" tile)
+          h1.mb-2.display-1.text-center(v-else) About Students' Gymkhana  
           v-row.justify-center
             v-col(sm="6" md="4")
-              v-img(src="../assets/workstation-336369.jpg" )
+              v-skeleton-loader(v-if="$apollo.queries.societies.loading" loading="loading" type="image" align="center" tile)
+              v-img(src="../assets/workstation-336369.jpg" v-else)
             v-col(md="6" align-self="center")
-              p.subtitle-1.text-center  Students' Gymkhana, IIT Jodhpur is the governing body that looks after all student activities.
+              v-skeleton-loader(v-if="$apollo.queries.societies.loading" loading="loading" type="text@3" align="center" tile)
+              p.subtitle-1.text-center(v-else)  Students' Gymkhana, IIT Jodhpur is the governing body that looks after all student activities.
+          
       v-row(v-if="!$apollo.queries.societies.loading").mt-4
         v-col
           v-row.justify-center
-            v-col(sm="6" md="6")
-              v-row.pa-2.justify-center.title.font-weight-regular
+            v-col(sm="6" md="6" v-if="!$apollo.queries.societies.loading")
+              v-row.pa-2.justify-center.title.font-weight-regular()
                 v-icon(left) mdi-newspaper
                 | News
               NewsTable( v-if="societies.edges.find(({node})=>node.pastNews.edges.length)"
@@ -44,7 +49,8 @@
               )
               v-col(v-else).text-center.title
                 | There is no News.
-            v-col(md="6" sm="6")
+            v-skeleton-loader(v-else loading="loading" type="list-item-avatar-three-line" align="center" tile)
+            v-col(md="6" sm="6" v-if="!$apollo.queries.societies.loading")
               v-row.pa-2.justify-center.title.font-weight-regular.text-center
                 v-icon(left) mdi-note-text
                 | Upcoming Events
@@ -54,6 +60,7 @@
               )
               v-col(v-else).text-center.title
                 | There are no Upcoming Events.
+            v-skeleton-loader(v-else loading="loading" type="list-item-avatar-three-line" align="center" tile)
     v-parallax(
       v-if="!$apollo.queries.festivals.loading"
       src="../assets/hero.jpeg"
@@ -61,16 +68,19 @@
     )
       v-content.align-center.mask
         v-container.container--fluid.mb-12
-          v-row.display-1.justify-center.mb-12 Festivals
+          v-skeleton-loader(v-if="$apollo.queries.societies.loading" loading="loading" type="heading" align="center" tile )
+          v-row.display-1.justify-center.mb-12(v-else) Festivals
           v-row
             FestivalCarousel(:festivalsList="festivals.edges")
-    v-container(v-if="!$apollo.queries.societies.loading")
+    v-container()
       v-col(cols="12")
-        p.display-1.text-center Societies
+        v-skeleton-loader(v-if="$apollo.queries.societies.loading" loading="loading" type="heading" align="center" tile)
+        p.display-1.text-center(v-else) Societies 
       v-col(cols="12" v-if="societies")
         v-row.justify-center
           v-col(cols="12" sm="6" v-for="({ node }, i) in societies.edges" :key="i")
-            StripedCard(:node="node")
+            StripedCard(:node="node" v-if="!$apollo.queries.societies.loading")
+            v-skeleton-loader(v-else loading="loading" type="card")
     v-img(src="../assets/other/background.svg" v-if="!$apollo.queries.homeGallery.loading && homeGallery" :min-height="carouselHeight")
       div.mask.fill-height
         v-container
diff --git a/src/views/OfficeBearers.vue b/src/views/OfficeBearers.vue
index 3151ab2..0cd04f7 100644
--- a/src/views/OfficeBearers.vue
+++ b/src/views/OfficeBearers.vue
@@ -1,4 +1,4 @@
-<template lang="pug" v-slot:placeholder>
+<template lang="pug">
   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")