From b5a3499ef1659b74fd7919fb0a02c67af5d6ced6 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 5 Sep 2020 18:44:14 -0500
Subject: [PATCH] basic custom Skeleton component for Character, Character page
 breadcrumbs

---
 client/src/components/Character.vue | 52 +++++++++++++++++++++++++++--
 client/src/components/Skeleton.vue  | 39 ++++++++++++++++++++++
 2 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/Skeleton.vue

diff --git a/client/src/components/Character.vue b/client/src/components/Character.vue
index 8368511..2586dea 100644
--- a/client/src/components/Character.vue
+++ b/client/src/components/Character.vue
@@ -1,18 +1,66 @@
 <template>
     <div>
+        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
         <b-card>
-            <h4>{{ this.$route.params.character }}</h4>
+            <h4 v-if="character">{{ this.$route.params.character }}</h4>
+            <Skeleton v-else style="max-width: 30%;"></Skeleton>
         </b-card>
     </div>
 </template>
 
 <style lang="scss" scoped>
-.card-body h4 {
+@import "../assets/scss/_variables";
+.card-body h4, .breadcrumb-item.active {
     text-transform: capitalize;
 }
+
+.skeleton {
+    min-height: 24px;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+    color: $grey-10;
+}
+
+.breadcrumb {
+    background-color: $grey-3;
+    border-radius: 0;
+    .breadcrumb-item {
+        color: $grey-10;
+    }
+}
 </style>
 
 <script>
+import Skeleton from './Skeleton.vue';
+
 export default {
+  data() {
+    return {
+      character: null,
+    };
+  },
+  components: {
+    Skeleton,
+  },
+  computed: {
+    breadcrumbs() {
+      return [
+        {
+          text: 'Home',
+          to: { name: 'Home' },
+        },
+        {
+          text: 'Characters',
+          to: { name: 'Home' },
+        },
+        {
+          text: this.character !== null ? this.character.name : this.$route.params.character,
+          active: true,
+        },
+      ];
+    },
+  },
+  methods: {},
 };
 </script>
diff --git a/client/src/components/Skeleton.vue b/client/src/components/Skeleton.vue
new file mode 100644
index 0000000..7947e6d
--- /dev/null
+++ b/client/src/components/Skeleton.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="skeleton"></div>
+</template>
+<style lang="scss" scoped>
+@import "../assets/scss/_variables";
+
+.skeleton {
+    background-color: $grey-4;
+    background-image: linear-gradient(90deg, $grey-4, $grey-6, $grey-4);
+    animation: 1.5s ease-in-out 0s infinite normal none running SkeletonLoading;
+    width: 100%;
+    display: block;
+    line-height: 1;
+    background-size: 200px 100%;
+    background-repeat: no-repeat;
+    border-radius: 3px;
+}
+
+@-webkit-keyframes SkeletonLoading {
+0% {
+    background-position: -200px 0;
+}
+100% {
+    background-position: calc(200px + 100%) 0;
+}
+}
+@keyframes SkeletonLoading {
+0% {
+    background-position: -200px 0;
+}
+100% {
+    background-position: calc(200px + 100%) 0;
+}
+}
+
+span {
+    font-size: 24px;
+}
+</style>