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