From e06c82297dff429e2fa91692ddb2285392829d5e Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 15 Sep 2022 20:53:22 +0200
Subject: [PATCH] added loading animation to main search page

---
 .../RecipeSearchView/RecipeSearchView.vue     |   3 +
 vue/src/components/RecipeCard.vue             | 167 ++++++++++++------
 2 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 86db26197..3e9a1d613 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -1115,6 +1115,9 @@ export default {
         },
     },
     mounted() {
+
+        this.recipes = Array(this.ui.page_size).fill({loading:true})
+
         this.$nextTick(function () {
             if (this.$cookies.isKey(UI_COOKIE_NAME)) {
                 this.ui = Object.assign({}, this.ui, this.$cookies.get(UI_COOKIE_NAME))
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 13a68a366..17bfb2da2 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -1,65 +1,105 @@
 <template>
-    <b-card no-body v-hover v-if="recipe">
-        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
-            <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
-            <div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1" v-if="show_context_menu">
-                <a>
-                    <recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
-                </a>
-            </div>
-            <div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2" v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
-                <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0"><i class="fa fa-clock"></i> {{ working_time }} </b-badge>
-                <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0"><i class="fa fa-pause"></i> {{ waiting_time }} </b-badge>
-            </div>
-        </a>
+    <div>
+        <template v-if="recipe && recipe.loading">
+            <b-card no-body v-hover>
+                <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image"
+                                     v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
+
+                 <b-card-body class="p-4">
+                    <h6>
+                        <b-skeleton width="95%"></b-skeleton>
+                    </h6>
+
+                    <b-card-text>
+                       <b-skeleton height="12px" :width="(45 + Math.random() * 45).toString() + '%'"></b-skeleton>
+                        <b-skeleton height="12px" :width="(20 + Math.random() * 25).toString() + '%'"></b-skeleton>
+                        <b-skeleton height="12px" :width="(30 + Math.random() * 35).toString() + '%'"></b-skeleton>
+                    </b-card-text>
+                </b-card-body>
+            </b-card>
+        </template>
+        <template v-else>
+            <b-card no-body v-hover v-if="recipe">
 
-        <b-card-body class="p-4">
-            <h6>
                 <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
-                    <template v-if="recipe !== null">{{ recipe.name }}</template>
-                    <template v-else>{{ meal_plan.title }}</template>
+                    <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image"
+                                     v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
+                    <div
+                        class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1"
+                        v-if="show_context_menu">
+                        <a>
+                            <recipe-context-menu :recipe="recipe" class="float-right"
+                                                 v-if="recipe !== null"></recipe-context-menu>
+                        </a>
+                    </div>
+                    <div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2"
+                         v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
+                        <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0">
+                            <i
+                                class="fa fa-clock"></i> {{ working_time }}
+                        </b-badge>
+                        <b-badge pill variant="secondary" class="mt-1 font-weight-normal"
+                                 v-if="recipe.waiting_time !== 0">
+                            <i class="fa fa-pause"></i> {{ waiting_time }}
+                        </b-badge>
+                    </div>
                 </a>
-            </h6>
 
-            <b-card-text style="text-overflow: ellipsis">
-                <template v-if="recipe !== null">
-                    <recipe-rating :recipe="recipe"></recipe-rating>
-                    <template v-if="recipe.description !== null && recipe.description !== undefined">
+                <b-card-body class="p-4">
+                    <h6>
+                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
+                            <template v-if="recipe !== null">{{ recipe.name }}</template>
+                            <template v-else>{{ meal_plan.title }}</template>
+                        </a>
+                    </h6>
+
+                    <b-card-text style="text-overflow: ellipsis">
+                        <template v-if="recipe !== null">
+                            <recipe-rating :recipe="recipe"></recipe-rating>
+                            <template v-if="recipe.description !== null && recipe.description !== undefined">
                         <span v-if="recipe.description.length > text_length">
                             {{ recipe.description.substr(0, text_length) + "\u2026" }}
                         </span>
-                        <span v-if="recipe.description.length <= text_length">
+                                <span v-if="recipe.description.length <= text_length">
                             {{ recipe.description }}
                         </span>
-                    </template>
-                    <p class="mt-1">
-                        <last-cooked :recipe="recipe"></last-cooked>
-                        <keywords-component :recipe="recipe" style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
-                    </p>
-                    <transition name="fade" mode="in-out">
-                        <div class="row mt-3" v-if="show_detail">
-                            <div class="col-md-12">
-                                <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6>
+                            </template>
+                            <p class="mt-1">
+                                <last-cooked :recipe="recipe"></last-cooked>
+                                <keywords-component :recipe="recipe"
+                                                    style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
+                            </p>
+                            <transition name="fade" mode="in-out">
+                                <div class="row mt-3" v-if="show_detail">
+                                    <div class="col-md-12">
+                                        <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}
+                                        </h6>
 
-                                <ingredients-card :steps="recipe.steps" :header="false" :detailed="false" :servings="recipe.servings" />
-                            </div>
-                        </div>
-                    </transition>
+                                        <ingredients-card :steps="recipe.steps" :header="false" :detailed="false"
+                                                          :servings="recipe.servings"/>
+                                    </div>
+                                </div>
+                            </transition>
 
-                    <b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge>
-                </template>
-                <template v-else>{{ meal_plan.note }}</template>
-            </b-card-text>
-        </b-card-body>
+                            <b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge>
+                        </template>
+                        <template v-else>{{ meal_plan.note }}</template>
+                    </b-card-text>
+                </b-card-body>
+
+                <b-card-footer v-if="footer_text !== undefined"><i v-bind:class="footer_icon"></i> {{ footer_text }}
+                </b-card-footer>
+            </b-card>
+        </template>
+
+    </div>
 
-        <b-card-footer v-if="footer_text !== undefined"> <i v-bind:class="footer_icon"></i> {{ footer_text }} </b-card-footer>
-    </b-card>
 </template>
 
 <script>
 import RecipeContextMenu from "@/components/RecipeContextMenu"
 import KeywordsComponent from "@/components/KeywordsComponent"
-import { resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit } from "@/utils/utils"
+import {resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils"
 import RecipeRating from "@/components/RecipeRating"
 import moment from "moment/moment"
 import Vue from "vue"
@@ -71,16 +111,29 @@ Vue.prototype.moment = moment
 export default {
     name: "RecipeCard",
     mixins: [ResolveUrlMixin],
-    components: { LastCooked, RecipeRating, KeywordsComponent, "recipe-context-menu": RecipeContextMenu, IngredientsCard },
+    components: {
+        LastCooked,
+        RecipeRating,
+        KeywordsComponent,
+        "recipe-context-menu": RecipeContextMenu,
+        IngredientsCard
+    },
     props: {
         recipe: Object,
         meal_plan: Object,
         footer_text: String,
         footer_icon: String,
-        detailed: { type: Boolean, default: true },
-        show_context_menu: { type: Boolean, default: true }
+        detailed: {type: Boolean, default: true},
+        show_context_menu: {type: Boolean, default: true}
+    },
+    data() {
+        return {
+            placeholder_image: window.IMAGE_PLACEHOLDER,
+        }
+    },
+
+    mounted() {
     },
-    mounted() {},
     computed: {
         show_detail: function () {
             return this.recipe?.steps !== undefined && this.detailed
@@ -99,14 +152,14 @@ export default {
                 return this.recipe.image
             }
         },
-        working_time: function() {
-            return calculateHourMinuteSplit(this.recipe.working_time)},
-        waiting_time: function() {
-            return calculateHourMinuteSplit(this.recipe.waiting_time)},
-    },
-    methods: {
-
+        working_time: function () {
+            return calculateHourMinuteSplit(this.recipe.working_time)
+        },
+        waiting_time: function () {
+            return calculateHourMinuteSplit(this.recipe.waiting_time)
+        },
     },
+    methods: {},
     directives: {
         hover: {
             inserted: function (el) {
@@ -127,7 +180,9 @@ export default {
 .fade-leave-active {
     transition: opacity 0.5s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+{
     opacity: 0;
 }
 </style>