route transition revision

.env

@@ -0,0 +1 @@
+VUE_APP_DATA_TIMEOUT=500

src/assets/styles/transitions.css

@@ -0,0 +1,12 @@
+/* Route Transitions */
+
+.fade-enter-active,
+.fade-leave-active {
+  /* transition: opacity .12s linear; */
+  transition: opacity 0 linear;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}

src/components/Skeletons/DataOverview.vue

@@ -1,48 +1,35 @@
 <template>
   <div class="data-overview">
+    <!-- controls -->
     <div
-      v-if="isReady"
-      class="data-overview-content"
+      v-if="displayRefreshControl"
+      class="data-table-controls mb-2"
     >
-      <!-- controls -->
-      <div
-        v-if="displayRefreshControl"
-        class="data-table-controls mb-2"
+      <KButton
+        appearance="secondary"
+        size="small"
+        :disabled="isLoading"
+        @click="$emit('reloadData')"
       >
-        <KButton
-          appearance="secondary"
-          size="small"
-          @click="$emit('reloadData')"
-        >
-          Refresh
-        </KButton>
-      </div>
+        <KIcon
+          v-if="isLoading"
+          icon="spinner"
+          color="rgba(0, 0, 0, 5)"
+          size="48"
+        />
+        <span>Refresh</span>
+      </KButton>
+    </div>
 
+    <div
+      v-if="isReady"
+      class="data-overview-content"
+    >
       <!-- metrics -->
       <MetricGrid
         v-if="!isLoading && displayMetrics && metricsData"
         :metrics="metricsData"
       />
-      <KEmptyState
-        v-else-if="isLoading && displayMetrics"
-        cta-is-hidden
-      >
-        <template slot="title">
-          {{ emptyState.title }}
-        </template>
-        <template
-          v-if="showCta"
-          slot="message"
-        >
-          <router-link
-            v-if="ctaAction && ctaAction.length"
-            :to="ctaAction"
-          >
-            {{ emptyState.ctaText }}
-          </router-link>
-          {{ emptyState.message }}
-        </template>
-      </KEmptyState>
 
       <!-- data -->
       <div v-if="displayDataTable && !tableDataIsEmpty && tableData">
@@ -119,21 +106,63 @@
         <slot name="content" />
       </div>
     </div>
+
+    <!-- loading state -->
     <KEmptyState
-      v-else
+      v-if="isLoading"
       cta-is-hidden
     >
       <template slot="title">
         <div class="card-icon mb-3">
           <KIcon
             icon="spinner"
             color="rgba(0, 0, 0, 0.1)"
-            size="48"
+            size="42"
           />
         </div>
         Data Loading...
       </template>
     </KEmptyState>
+
+    <!-- empty state -->
+    <KEmptyState
+      v-if="isEmpty"
+      cta-is-hidden
+    >
+      <template slot="title">
+        {{ emptyState.title }}
+      </template>
+      <template
+        v-if="showCta"
+        slot="message"
+      >
+        <router-link
+          v-if="ctaAction && ctaAction.length"
+          :to="ctaAction"
+        >
+          {{ emptyState.ctaText }}
+        </router-link>
+        {{ emptyState.message }}
+      </template>
+    </KEmptyState>
+
+    <!-- error has occurred -->
+    <KEmptyState
+      v-if="hasError"
+      cta-is-hidden
+    >
+      <template slot="title">
+        <div class="card-icon mb-3">
+          <KIcon
+            class="kong-icon--centered"
+            color="var(--yellow-base)"
+            icon="warning"
+            size="42"
+          />
+        </div>
+        An error has occurred while trying to load this data.
+      </template>
+    </KEmptyState>
   </div>
 </template>
 
@@ -280,6 +309,10 @@ export default {
   }
 }
 
+.empty-state-wrapper {
+  margin-bottom: 2em;
+}
+
 @media only screen and (min-width: 841px) {
   .info-grid {
 

src/components/Skeletons/YamlView.vue

@@ -1,36 +1,93 @@
 <template>
   <div class="yaml-view">
-    <KCard :title="title">
-      <template slot="body">
-        <prism
-          v-if="content"
-          class="code-block"
-          language="yaml"
-          :code="yamlContent"
-        />
-        <div v-else>
-          <p>No code to parse.</p>
+    <div
+      v-if="isReady"
+      class="yaml-view-content"
+    >
+      <KCard
+        v-if="!isLoading && !isEmpty"
+        :title="title"
+      >
+        <template slot="body">
+          <prism
+            class="code-block"
+            language="yaml"
+            :code="yamlContent"
+          />
+        </template>
+        <template slot="actions">
+          <KClipboardProvider
+            v-if="content"
+            v-slot="{ copyToClipboard }"
+          >
+            <KPop placement="bottom">
+              <KButton
+                appearance="primary"
+                @click="() => { copyToClipboard(yamlContent) }"
+              >
+                Copy YAML to Clipboard
+              </KButton>
+              <div slot="content">
+                <p>Entity copied to clipboard!</p>
+              </div>
+            </KPop>
+          </KClipboardProvider>
+        </template>
+      </KCard>
+    </div>
+
+    <!-- loading state -->
+    <KEmptyState
+      v-if="isLoading"
+      cta-is-hidden
+    >
+      <template slot="title">
+        <div class="card-icon mb-3">
+          <KIcon
+            icon="spinner"
+            color="rgba(0, 0, 0, 0.1)"
+            size="42"
+          />
+        </div>
+        Data Loading...
+      </template>
+    </KEmptyState>
+
+    <!-- no data to load -->
+    <KEmptyState
+      v-if="isEmpty"
+      cta-is-hidden
+    >
+      <template slot="title">
+        <div class="card-icon mb-3">
+          <KIcon
+            class="kong-icon--centered"
+            color="var(--yellow-base)"
+            icon="warning"
+            size="42"
+          />
         </div>
+        There is no data to display.
       </template>
-      <template slot="actions">
-        <KClipboardProvider
-          v-if="content"
-          v-slot="{ copyToClipboard }"
-        >
-          <KPop placement="bottom">
-            <KButton
-              appearance="primary"
-              @click="() => { copyToClipboard(yamlContent) }"
-            >
-              Copy YAML to Clipboard
-            </KButton>
-            <div slot="content">
-              <p>Entity copied to clipboard!</p>
-            </div>
-          </KPop>
-        </KClipboardProvider>
+    </KEmptyState>
+
+    <!-- error -->
+    <KEmptyState
+      v-if="hasError"
+      cta-is-hidden
+    >
+      <template slot="title">
+        <div class="card-icon mb-3">
+          <KIcon
+            class="kong-icon--centered"
+            color="var(--yellow-base)"
+            icon="warning"
+            size="42"
+          />
+        </div>
+        An error has occurred while trying to load this data.
       </template>
-    </KCard>
+    </KEmptyState>
   </div>
 </template>
 
@@ -52,9 +109,24 @@ export default {
     content: {
       type: Object,
       default: null
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    hasError: {
+      type: Boolean,
+      default: false
+    },
+    isEmpty: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
+    isReady () {
+      return !this.isEmpty && !this.hasError && !this.isLoading
+    },
     yamlContent () {
       const content = this.content
 
@@ -64,9 +136,22 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .code-block {
   border-radius: 3px;
   background-color: rgba(150, 58, 133, 0.05);
 }
+
+.empty-state-title {
+
+  .card-icon {
+    text-align: center;
+
+    img, svg {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
 </style>

src/main.js

@@ -23,6 +23,7 @@ import '@/assets/styles/main.css'
 import '@/assets/styles/typography.css'
 import '@/assets/styles/inputs.css'
 import '@/assets/styles/components.css'
+import '@/assets/styles/transitions.css'
 
 // Kong Design System styles
 import '@kongponents/styles/styles.css'

src/views/Entities/EntityDataplanes.vue

@@ -64,6 +64,7 @@ export default {
     bootstrap () {
       this.isLoading = true
       this.isEmpty = false
+      this.hasError = false
 
       // get the mesh from our route params
       const mesh = this.$route.params.mesh
@@ -96,14 +97,13 @@ export default {
                     const gateway = response.dataplane.networking.gateway
 
                     if (inbound || gateway) {
-                      /** inbound */
                       if (inbound) {
+                        /** inbound */
                         for (let i = 0; i < inbound.length; i++) {
                           tags = dpTagCleaner(inbound[i].tags)
                         }
-                      }
-                      /** gateway */
-                      else if (gateway) {
+                      } else if (gateway) {
+                        /** gateway */
                         tags = dpTagCleaner(gateway.tags)
                       }
                     }
@@ -211,7 +211,9 @@ export default {
             console.error(error)
           })
           .finally(() => {
-            this.isLoading = false
+            setTimeout(() => {
+              this.isLoading = false
+            }, process.env.VUE_APP_DATA_TIMEOUT)
           })
       }