github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 22:43:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

lazy load cards

Browse source
This commit is contained in:
hay-kot 2021-05-25 17:51:11 -07:00
commit 05377a4364
1 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/UI/CardSection.vue
View file

@ -58,6 +58,7 @@
<div v-if="recipes" class="mt-2">
<v-row v-if="!viewScale">
<v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name">
<v-lazy>
<RecipeCard
:name="recipe.name"
:description="recipe.description"
@ -66,6 +67,7 @@
:image="recipe.image"
:tags="recipe.tags"
/>
</v-lazy>
</v-col>
</v-row>
<v-row v-else dense>
@ -78,6 +80,7 @@
v-for="recipe in recipes.slice(0, cardLimit)"
:key="recipe.name"
>
<v-lazy>
<MobileRecipeCard
:name="recipe.name"
:description="recipe.description"
@ -86,6 +89,7 @@
:image="recipe.image"
:tags="recipe.tags"
/>
</v-lazy>
</v-col>
</v-row>
</div>
@ -139,7 +143,7 @@ export default {
data() {
return {
sortLoading: false,
cardLimit: 30,
cardLimit: 50,
loading: false,
EVENTS: {
az: "az",