Showing recipe card when data is ready

front/components/Recipes/ShowRecipe.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="loaded">
         <Card>
             <p slot="title">{{ name }}</p>
             <Row type="flex" justify="right" style="margin-bottom: 10px;">
@@ -56,6 +56,7 @@
                 description: '',
                 ingredients: [],
                 steps: [],
+                loaded: false,
                 nutrition: {
                     kcal: 0,
                     carbohydrates: 0,
@@ -78,6 +79,7 @@
                         this.ingredients = data.ingredients;
                         this.steps = data.steps;
                         this.nutrition = data.nutrition;
+                        this.loaded = true;
                     })
                     .catch((error) => {
                         console.log(error);
@@ -108,4 +110,4 @@
 
 <style scoped>
 
-</style>
+</style>