potential bug: infinite scroll could cause tab crash

[SgtPooki]

i'm no vue expert but I think the source is here?

teatime/components/BooksList.vue

Lines 1 to 14 in 9fe5175

	<template>
	<div id="results">
	<ul v-if="booksList.length">
	<BookCard
	v-for="(result, index) in booksList"
	:key="index"
	:book="result"
	@click="onBookClick(result)"
	/>
	</ul>
	<p v-if="isLoading">Searching {{ remote }}...</p>
	<p v-if="!isLoading && !booksList.length">No results</p>
	</div>
	</template>

basically, when scrolling down, it looks like the BookCard's are all being added to the dom, and never removed. Also, there is no pre-fetching of next bookcards, so scrolling is blocked for a bit while scrolling.

ideally, a few scrolls ahead (up and down) would be fetched so scrolling always has content to render.

Also, when BookCards are no longer in view, they could be removed from the DOM to prevent large lists from overwhelming a tab.

If you are using Helia and a persistent blockstore, fetching data for books (to render the BookCard) based on scroll position should be almost instant.