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

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

@ -58,14 +58,16 @@
<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">
<RecipeCard <v-lazy>
:name="recipe.name" <RecipeCard
:description="recipe.description" :name="recipe.name"
:slug="recipe.slug" :description="recipe.description"
:rating="recipe.rating" :slug="recipe.slug"
:image="recipe.image" :rating="recipe.rating"
:tags="recipe.tags" :image="recipe.image"
/> :tags="recipe.tags"
/>
</v-lazy>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-else dense> <v-row v-else dense>
@ -78,14 +80,16 @@
v-for="recipe in recipes.slice(0, cardLimit)" v-for="recipe in recipes.slice(0, cardLimit)"
:key="recipe.name" :key="recipe.name"
> >
<MobileRecipeCard <v-lazy>
:name="recipe.name" <MobileRecipeCard
:description="recipe.description" :name="recipe.name"
:slug="recipe.slug" :description="recipe.description"
:rating="recipe.rating" :slug="recipe.slug"
:image="recipe.image" :rating="recipe.rating"
:tags="recipe.tags" :image="recipe.image"
/> :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",