Coder Social home page Coder Social logo

smallsticker / gatsby-starter-infinite-scroll Goto Github PK

View Code? Open in Web Editor NEW

This project forked from baobabkoodaa/gatsby-starter-infinite-scroll

0.0 1.0 0.0 17.3 MB

A Gatsby starter with infinite scroll and pagination.

Home Page: https://gatsby-starter-infinite-scroll.baobab.fi/

License: MIT License

JavaScript 77.65% CSS 22.35%

gatsby-starter-infinite-scroll's Introduction

Gatsby

Gatsby Starter Infinite Scroll

This is a Gatsby starter intended for developers who need infinite scroll or pagination in their Gatsby project.

Try out this live demo with 10k photos »»» https://gatsby-starter-infinite-scroll.baobab.fi

⚡ Get started

Fork and npm install. Run in dev mode with gatsby develop.

If you are wondering how to apply this to your specific use case, here are some examples: blog posts, photos.

If you want to understand how this works, I recommend reading the code in the following order:

» gatsby-node.js
» gatsby-browser.js
» templates/paginatedPageTemplate.js
» components/view.js
» components/globalState.js

If you run into any difficulty, I will be happy to help.

🚀 To infinity and beyond!

  • The default behavior is to use infinite scroll, but fallback to pagination if JS is disabled or an error occurs. Additionally, the demo has a toggle so you can test both modes without disabling JS in your browser.
  • This implementation does not fetch unnecessary metadata at initial pageload. Instead, we only fetch the metadata that we actually need. For example, if we're showing you 120 items right now, then we only need metadata for 120 items. We can ask for more metadata as you scroll for more items. This was somewhat awkward to implement in Gatsby, which is why previously published implementations load metadata for all items during initial page load, and then use client side JS to filter to the desired items. The performance hit for doing that isn't too bad for small collections of items, but it becomes unbearable for large collections, especially if the metadata contains base64 versions of images as placeholders. This performance optimization was my main motivation for creating this starter.
  • Additionally, a minor performance improvement: initial items shipped along with the initial page instead of separately fetched.
  • When the user navigates to another internal page and later returns to front page, scroll position is not forgotten (because we keep items in global state).
  • Many edge cases are considered
    • Large screens / small pages: If initial items fit to screen before scrolling is possible, we fetch more items (this is often overlooked in infinite scroll implementations, e.g. LinkedIn and react-simple-infinite-scroll have this bug.)
    • Slow connections: the initial pageload is consistent even before the React component mounts.
    • Metadata fetching: allow fetching multiple pages of metadata concurrently (as opposed to consecutively, which slows the maximum scroll speed. This can be relevant for example when images are cached locally and metadata pages are not, or if the user wants to scroll fast to a specific location before images can load).
  • Includes a script that can fetch large amounts of random images from Unsplash.

🎓 Attribution

  • Photos are from Unsplash. Unfortunately I couldn't get photographer attribution, because their main API is rate limited, and the non limited API (source.unsplash.com) only gave me photos. If you can help me get photographer attribution, that would be awesome!
  • Infinite scroll uses some code from Jared Palmer's react-simple-infinite-scroll.
  • Image layout CSS Grid is modified from work by LekoArts.
  • Traffic lights CSS graphics are modified from work by Azik Samarkandiy.
  • Loading spinner uses icon from FontAwesome.

I would love to see what you build with this. You can drop me a message or star this repo.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.