Feat: add infinite scroll explorer loading state

[gdixon]

User Story

As a Gitcoin user using the Grants explorer, if the infinite scroll at the bottom of the page is loading results, I want a loading state that lets me know that my results will be here shortly.

Design Files:

Active Keyword Design Loading Animation Design

Definition of Done

GIVEN I scroll to the bottom of the Gitcoin Grants Explorer WHEN the results are not shown immediately because it is loading THEN I see a loading state that lets me know that my results will be here shortly.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.0243 ETH (100.18 USD @ $4122.77/ETH) attached to it as part of the gitcoinco fund.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  • Want to chip in? Add your own contribution here.
  • Questions? Checkout Gitcoin Help or the Gitcoin's Discord
  • $2,500,000,006,959,659.05 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Workers have applied to start work.

These users each claimed they can complete the work by 264 years, 2 months from now. Please review their action plans below:

1) pfed-prog has applied to start work _(Funders only: approve worker | reject worker)_.

Hello, Thank you for the opportunity. My name is Pavel Fedotov and I have a portfolio of 23 projects on Gitcoin. Besides, I have expertise in completing Project in JavaScript and React Framework. Best regards, Pavel Fedotov 2) skalv has applied to start work _(Funders only: approve worker | reject worker)_.

Hi ! I'm interested to work on your project ! 3) erhuve has applied to start work _(Funders only: approve worker | reject worker)_.

Thank you for this opportunity! I will review the given design docs and the current codebase. To your preference, I can then outline what I propose to code (e.g. I will create a useState variable for loading and render the loading icon while the promise of new results is being awaited), and/or get straight to implementing it and making the PR. 4) felixfarquharson has applied to start work _(Funders only: approve worker | reject worker)_.

I would be very happy to send you JavaScript for any site with an infinite scroll that will show a loading message when it is loading new results. The picture will be there ready and waiting (if there are more results) and will be replaced by a loading image further down the results list when the results are loaded.

I can also modify your search query box on your front end to provide a longer wait before the results/suggestions are queried and modify the design to put the current search query on there.

I can provide functions/back end code for replying if the there are more results or not aswell if needed. 5) ayush-0801 has applied to start work _(Funders only: approve worker | reject worker)_.

I am really interested in working on this project. With my experience in UX Design and Web Development, I am sure that I will be the perfect fit in implementing the loading animation with a proper design process thus enabling a much more consistent and uniform user experience. 6) caleb335 has applied to start work _(Funders only: approve worker | reject worker)_.

I'll build this feature using Reactjs

What is the expected delivery time? 7) agileurbanite has applied to start work _(Funders only: approve worker | reject worker)_.

Use react to create a virtualized scroll when fetching data establish loading state. 8) suhailvs has applied to start work _(Funders only: approve worker | reject worker)_.

Hi, Since the codebase is based on django, I have more than 6+ years experiance with django i hope i can do this job. i will use https://github.com/imakewebthings/waypoints to detect the scroll and implement infinte scroll. 9) ted2funny has applied to start work _(Funders only: approve worker | reject worker)_.

although this would actual be my first task i am interest in taking the challenge to get a start . 10) tormentv1 has applied to start work _(Funders only: approve worker | reject worker)_.

I'm interested. As long I can get, you are using Vue for the frontend (I've some experience on it) and is needed to set a loading state that shows the loading gif, attached in the description. I think is doable in a few hours. 11) diali1999 has applied to start work _(Funders only: approve worker | reject worker)_.

interested in this bounty . Would like to do. 12) ibanda has applied to start work _(Funders only: approve worker | reject worker)_.

I'm interested in working on this bounty 13) elmahdi1962 has applied to start work _(Funders only: approve worker | reject worker)_.

i don't really have an action plan im real beginner i just want try solve something in the real world projects 14) harshit-dxt has applied to start work _(Funders only: approve worker | reject worker)_.

I forked the repo. Changed filles regarding the explorer and landing page of the grant explorer. Would love to just have a pull request and check if that suffices. 15) rhaicode has applied to start work _(Funders only: approve worker | reject worker)_.

I'll be using a library that performs stale-while-revalidate data fetching and I also have experience with Interaction Observer API to achieve the infinite scrolling effect. 16) chardebeer has applied to start work _(Funders only: approve worker | reject worker)_.

I will familiarize myself with the codebase and adjust my strategy accordingly to implement this feature with state management. I would do this using functional react 17) mkw2000 has applied to start work _(Funders only: approve worker | reject worker)_.

I'm a big fan of Vue and would love to jump on this 18) jcomasor has applied to start work _(Funders only: approve worker | reject worker)_.

Hi, I'm interested to do the issue. I have experience in vue.js and i have done this kind of features in others projects. 19) stormle has applied to start work _(Funders only: approve worker | reject worker)_.

I'll do this - no bullshit. I've worked on changing website behavior with chrome extensions before and changing the pre-existing code to support this is a lot easier than modifying behavior after the fact. 20) charlesryan has applied to start work _(Funders only: approve worker | reject worker)_.

Hey I've done a bunch of these in vanilla JS, React, and Vue. My approach would be to just display the animation when the network request goes out for more items and hide it when that request returns. If I'm feeling fancy, I might throw in a scale and/or opacity transition 21) tarunvella has applied to start work _(Funders only: approve worker | reject worker)_.

Hi, I am interested to contribute for this feature to OSS by using my expertise in Vue using state management, so that we can re-use this feature across the app. I have a good experience building production grade web applications using vue at my profession as software development engineer . I am eagerly waiting for your acknowledgement to start implementing this feature

Regards, Tarun Kumar Vella 22) phantomcracker has applied to start work _(Funders only: approve worker | reject worker)_.

I would like to work on this bounty, lazy loaders are common in big data websites, so it is normal to have this. 23) itzami has applied to start work _(Funders only: approve worker | reject worker)_.

This should be an easy enough task to complete and I would like to offer myself to do it 👋 It would be great to be able to enhance GitCoin and actively contribute!

The plan is straightforward:

1. Get the design (in this case it's probably just the gif that you attached
2. Know the main pain points that could possibly exist (maybe someone has already tried to do this and failed)
3. Get to action!

That's pretty much it 😄 I take joy in helping others so this is a great opportunity! 24) ramennoodles1998 has applied to start work _(Funders only: approve worker | reject worker)_.

I am new to the gitcoin space but am wanting to make a good first impression. I have worked in javascript and react for years, and would love to help out the open-source community. 25) jack-of-blades has applied to start work _(Funders only: approve worker | reject worker)_.

I am new to Gitcoin and am excited to learn.

I am a Computer Science student and have 3 years front-end experience with Gatsby and React.

My plan is to use a simple state to add loading information to the bottom of the page when a user scrolls down. 26) zhaojialii has applied to start work _(Funders only: approve worker | reject worker)_.

Hi～ Here is the plan:

1. Confirm the interface for loading the content.
2. Add a listener to the position of the page, show the loading animation if reach to the bottom.
3. Fetch new content at the same time.
4. Concat to the original content list and hide the loading animation.
5. Keep the scroll listener active. 27) tecnovofficial has applied to start work _(Funders only: approve worker | reject worker)_.

I would like to work on this bounty, it will give me good experience as well as letting me profit a small amount. If you accept my request then I will complete the task within 12-36 hours of assignment. 28) abhiswaspatil has applied to start work _(Funders only: approve worker | reject worker)_.

I am a React developer and will try to use the current state status to check the loading state and implement the loading state. 29) dbuddhadev13 has applied to start work _(Funders only: approve worker | reject worker)_.

1. Add a listener to scroll event and compare it with the end of the div for the list.
2. Activate loader when the div size and scroll height is same (request the load more API at the same time).
3. Deactivate loader on success response from API.

If possible use react-infinite-scroll-component npm package to ease out the implementation

Learn more on the Gitcoin Issue Details page.

[agileurbanite]

Interested

[MHCYR]

Hi, Im a frontend developer with experience using Vue.js and I would like to work on this issue.

[tarunvella]

Hi,

I am interested to contribute for this feature to OSS by using my expertise in Vue using state management, so that we can re-use this feature across the app. I have a good experience building production grade web applications using vue at my profession as software development engineer . I am eagerly waiting for your acknowledgement to start implementing this feature