From f90415d159d496acc771680e4e44ba2564cc9c7b Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Tue, 30 Mar 2021 17:51:24 -0800
Subject: [PATCH] recipe loaders screen

---
 frontend/src/pages/Recipe/ViewRecipe.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Recipe/ViewRecipe.vue b/frontend/src/pages/Recipe/ViewRecipe.vue
index b93ad9d19..506b7eb22 100644
--- a/frontend/src/pages/Recipe/ViewRecipe.vue
+++ b/frontend/src/pages/Recipe/ViewRecipe.vue
@@ -1,6 +1,17 @@
 <template>
   <v-container>
-    <v-card id="myRecipe">
+    <v-card
+      v-if="skeleton"
+      :color="`white ${theme.isDark ? 'darken-2' : 'lighten-4'}`"
+      class="pa-3"
+    >
+      <v-skeleton-loader
+        class="mx-auto"
+        height="700px"
+        type="card"
+      ></v-skeleton-loader>
+    </v-card>
+    <v-card v-else id="myRecipe">
       <v-img
         height="400"
         :src="getImage(recipeDetails.image)"
@@ -77,8 +88,14 @@ export default {
     RecipeTimeCard,
   },
   mixins: [user],
+  inject: {
+    theme: {
+      default: { isDark: false },
+    },
+  },
   data() {
     return {
+      skeleton: true,
       // currentRecipe: this.$route.params.recipe,
       form: false,
       jsonEditor: false,
@@ -138,6 +155,7 @@ export default {
     },
     async getRecipeDetails() {
       this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe);
+      this.skeleton = false;
       this.form = false;
     },
     getImage(image) {