Better Infinite Scroll

[icegotcha]

Description

According to #60, I updated the viewer to fully support infinite scroll as follow:

• Update function "fetchData" to fetch only 5 posts in one time & support fetching after a post ID (and remove posts which have no image).
• Add a loading spinner that will display at the bottom when user scroll to bottom of the webpage. I used react-spinners to implement it.
• Add useEffect() to 3 function
  • first useEffect() will work if a user loads the webpage and search with a new term.
  • second useEffect() will work after first useEffect() (when content is fully loaded). This will create an observer (called Intersection Observer API) that handles loading more content.
  • third useEffect() will work if the user scrolls to loading more areas (handled by the observer).
• Update preload link in siteHead.js to fetch only 5 posts.

Besides, I also made minor changes:

• Let the state results store an array instead. I found it's easier to handle displaying posts.
• Ruduced calling setSearchTerm to solve performance issues.
• Update shrinkHeader to check if el is null before adding a listener and return a removing listener function used in the first useEffect().

Screenshot

https://imgur.com/a/8rTfmKs

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/gregrickaby/reddit-image-viewer/35w1orjq5
✅ Preview: https://reddit-image-viewer-git-feature-infinite-scroll.gregrickaby.vercel.app

[gregrickaby]

@icegotcha Wow! This is perfect, thank you! Feel free to take on other issues