Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 23:59:45 +02:00
Code Issues Releases Activity

Feature/infinite scroll (#719)

Browse source 
* feat(frontend): ✨ lazy-load all recipes page

* feat(frontend): ✨ enable runtime theme through env-variables

* docs(docs): 📝 update v1 changelog

* bump version

Co-authored-by: Hayden <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-10-03 14:07:18 -08:00 • committed by GitHub
parent 568215cf70
commit c0dd07f9e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 548 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/pages/recipes/all.vue
View file

@ -3,23 +3,49 @@
<RecipeCardSection
:icon="$globals.icons.primary"
:title="$t('page.all-recipes')"
:recipes="allRecipes"
@sort="assignSorted"
:recipes="recipes"
></RecipeCardSection>
<v-card v-intersect="infiniteScroll"></v-card>
<v-fade-transition>
<AppLoader v-if="loading" :loading="loading" />
</v-fade-transition>
</v-container>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
import { useThrottleFn } from "@vueuse/core";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { useRecipes, allRecipes } from "~/composables/use-recipes";
import { useLazyRecipes } from "~/composables/use-recipes";
export default defineComponent({
components: { RecipeCardSection },
setup() {
const { assignSorted } = useRecipes(true);
const start = ref(1);
const limit = ref(30);
const increment = ref(30);
const ready = ref(false);
const loading = ref(false);
return { allRecipes, assignSorted };
const { recipes, fetchMore } = useLazyRecipes();
onMounted(async () => {
await fetchMore(start.value, limit.value);
ready.value = true;
});
const infiniteScroll = useThrottleFn(() => {
if (!ready.value) {
return;
}
loading.value = true;
start.value = limit.value + 1;
limit.value = limit.value + increment.value;
fetchMore(start.value, limit.value);
loading.value = false;
}, 500);
return { recipes, infiniteScroll, loading };
},
});
</script>