Ufdjrw

I have a page with a search input, once the user click on submit results come up.

There can be a lot of results and I don't want to load them all at once, how can I fetch more data into the page using Lodash throttle on mouse move?

This is my react component:

const getContacts = async (searchString) => 
 const data: contactsInfo = await axios.get(`api/Contats/Search?contactNum=$searchString`);
 return contactsInfo;
;
export default class Home extends React.Component 
 state = 
 contactsInfo: [],
 searchString: '',
 ;

 handleSubmit = async () => 
 const searchString = this.state;
 const contactsInfo = await getContacts(searchString);
 this.setState( contactsInfo );
 ;

 onInputChange = e => 
 this.setState(
 searchString: e.target.value,
 );
 ;

 onMouseMove = e => 

 ;

 render() 
 const contactsInfo, searchString, = this.state;
 return (
 <div css=bodyWrap onMouseMove=e => this.onMouseMove(e)>
 <Header appName="VERIFY" user=user />
 user.viewApp && (
 <div css=innerWrap>
 <SearchInput
 searchIcon
 value= ''
 onChange=e => this.onInputChange(e)
 handleSubmit=this.handleSubmit
 />
 contactsInfo.map(info => (
 <SearchResultPanel
 info=info
 isAdmin=user.isAdmin
 key=info.id
 />
 ))
 </div>
 )
 <Footer />
 </div>

 );
 

I supposed that, using getContacts() you retrieve ALL the contacts, and then you just want to show them at some rate, like showing the first 20, then when you reach the last one, another 20s appear.
Just asking because this is really different from "let's fetch the first 20 contacts, show them, and when the user reaches the last one, fetch another 20s".

So, if the first assumption I've made it's correct, I can raccomend you to use the Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

This is really useful in case like yours (it's even written in the documentation "Lazy-loading of images or other content as a page is scrolled.").

The idea is that you should add this Intersection Observer, and start the observation on the last image: this observator will run a callback as soon as the last image appears on the screen (you can even decide the percentage of the image that must be on the screen).
For example, you can say that, as soon as 1px of the image appear on the screen, you add another 20s images!

Notice that, once another 20s images are shown, you must unobserve the currect observed image, and observe the new last image!

I can also suggest to not put the observer on the last image, but maybe on the third last.

EDIT: I'm not sure this answers your question. It does if I consider the title "Fetch more content as user is scrolling down", but it does not actually use mouseover (even though I think this implementation is the best one for your goal).