javascript - Prevent react-waypoint scroll position from reseting to top after fetching and appending items -

i have component structured below. uses react-waypoint fetch , render additional cards once user reaches end of card collection.

componentdidmount() {     const { actions, user } = this.props;     if (!user) return;     actions.getconnections(user.guid, 0, default_fetch_row_count)         .then(({ data }) => {             this.setstate({                 fullyloaded: data.length < default_fetch_row_count,                 firstloaded: true             });         }); }  loadmoreconnections(rows = default_fetch_row_count) {     const { user, connections, actions } = this.props;     const { fullyloaded } = this.state;      if (fullyloaded) return;     return actions.getconnections(user.guid, connections.length, rows, true)         .then(({ data }) => {             this.setstate({                 fullyloaded: data.length < rows             });         }); }  showconnections() {     const { user, connections, actions } = this.props;     return (         connections.map((connection, index) => (             <div classname="col-12 col-md-6 col-lg-4 col-xl-3 card-wrapper" key={index}>                 {(!this.state.fullyloaded && index === (connections.length - threshold)) && (index >= default_fetch_row_count - threshold) && (                     <waypoint                         onenter={() => {                             this.loadmoreconnections();                         }}                     />                 )}                 <link                     id={`${idprefix}connectioncardlink${index}`}                     to={`/${routes.profile}/${getprofileurl(connection)}`}                 >                     <connectioncard                         idprefix={idprefix}                         src={connection.photo ? connection.photo.url : ''}                         idsuffix={index}                     >                         <h5 id={`${idprefix}nametxt${index}`}                             classname="text-truncate font-weight-bold">{connection.firstname} {connection.lastname}</h5>                         <h6 id={`${idprefix}primaryjobtxt${index}`}                             classname="text-truncate text-secondary primary-job">                             {connection.primaryworkhistory                                 ? (                                     `${connection.primaryworkhistory.jobs[0].jobname} @ ${connection.primaryworkhistory.employer.name}`                                     + `${connection.primaryworkhistory.employer.location                                         ? `, ${connection.primaryworkhistory.employer.location.city}, ${connection.primaryworkhistory.employer.location.state}`                                         : '' }`                                 )                                 : ' '                             }                         </h6>                         <div classname="button-group">                             <link                                 id={`${idprefix}viewprofilebtn${index}`}                                 classname="button hollow small"                                 to={`/${routes.profile}/${getprofileurl(connection)}`}                             >                                 view profile                             </link>                             <button                                 id={`${idprefix}messagebtn${index}`}                                 classname="small"                                 label="message"                                 onclick={(e) => {                                     e.preventdefault();                                     actions.openchatbyparticipants(user, connection);                                 }}                             />                         </div>                     </connectioncard>                 </link>             </div>         ))     ); }  shownoresults() {     return (         <emptysearchresults             idprefix={`${idprefix}emptysearch`}             title="don’t shy."             description="it looks don’t have connections, don’t worry can search our community."         >             <link                 id={`${idprefix}getconnectedbtn`}                 classname="button action-button"                 to={`/${routes.community}/suggested`}             >                 connected             </link>         </emptysearchresults>     ) }  render() {     const { connections, isfetchingconnections } = this.props;     const { firstloaded } = this.state;     let view = null;      if (connections.length) {         view = this.showconnections();     } else if (firstloaded) {         view = this.shownoresults();     }      return (         <div classname="row">             {view}         </div>     ); } 

this works expected, want display loader component while additional data fetched , rendered. this, i've tried implement loader component adding/modifying following:

showloader() {     return (         <div classname="select-overlay-loader d-flex justify-content-center align-items-center">             <loader />         </div>     ); }  if(isfetchingconnections) {         view = this.showloader();     } else if (connections.length) {         view = this.showconnections();     } else if (firstloaded) {         view = this.shownoresults();     } 

these changes display loader component while there more card data being fetched , displayed, after new cards appended list, scrollview of list resets top. not sure how can preserve scroll location of list in-between fetches.

i have seen answers similar questions such one

that suggest set list's scrolltop list's current scrollheght before fetching new data.

i have tried, have not been able implement fix.

is issue component placed? have seen examples placed @ end of rendered list, in case, component included @ top of every card component in map function.

i working on existing codebase , new react, please forgive cluelessness on part. hope question presented clearly.

can point me in right direction?

cheers!