add Promise to FETCH_CHARACTER action, add getCharacter getter to store, fix Skeleton.vue animated position bricking

client/src/components/Skeleton.vue

@@ -26,14 +26,14 @@
 
 @-webkit-keyframes SkeletonLoading {
     0% {
-        background-position: 0 0;
+        background-position: -200px 0;
     }
     100% {
         background-position: calc(200px + 100%) 0;
     }
 }
 
-@keyframes SkeletonLoading {
+@keyframes SkeletonLoa,ding {
     0% {
         background-position: -200px 0;
     }
@@ -51,8 +51,7 @@ span {
 export default {
     props: {
         inner_style: {
-            type: String,
+            type: Object
-            default: ''
         },
         inner_class: {
             type: String,

client/src/store.js

@@ -118,10 +118,17 @@ export default new Vuex.Store({
                 })
         },
         [types.FETCH_CHARACTER]({commit}, character_id) {
+            return new Promise((resolve, reject) => {
                 const path = `${process.env.VUE_APP_API_URL}/api/character/${character_id}/`;
                 axios.get(path)
                     .then((res) => {
                         commit(types.MERGE_CHARACTER, {id: character_id, characterData: res.data})
+                        resolve();
+                    })
+                    .catch((error) => {
+                        reject();
+                        console.error(error);
+                    })
             })
         }
     },
@@ -146,5 +153,8 @@ export default new Vuex.Store({
         isValidEpisode: (state, getters) => (season, episode = 1) => {
             return season >= 1 && season <= 9 && episode >= 1 && episode <= getters.getEpisodeCount(season)
         },
+        getCharacter: (state) => (character_id) => {
+            return state.characters[character_id];
+        }
     }
 });