# infinite scroll

A user-experience pattern in which scrolling to the end of a page causes more content to load.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Infinite scroll with Next.js, Framer Motion, and Supabase

DevFeed: [Infinite scroll with Next.js, Framer Motion, and Supabase](<https://devfeed.tech/articles/infinite-scroll-with-next-js-framer-motion-and-supabase-403.md>)

Original publisher: [Read original article](<https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion>)

Author: Francesco Sansalvadore

Published: 2023-04-04T07:00:00Z

Content type: tutorial

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [infinite scroll](<https://devfeed.tech/topics/infinite-scroll.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [Supabase](<https://devfeed.tech/topics/supabase.md>), [Framer Motion](<https://devfeed.tech/topics/framer-motion.md>), [web design](<https://devfeed.tech/topics/web-design.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [Caching](<https://devfeed.tech/topics/caching.md>)

Tags: [cache](<https://devfeed.tech/tags/cache.md>), [code-splitting](<https://devfeed.tech/tags/code-splitting.md>), [data](<https://devfeed.tech/tags/data.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [infinite-scroll](<https://devfeed.tech/tags/infinite-scroll.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [performance](<https://devfeed.tech/tags/performance.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [web-design](<https://devfeed.tech/tags/web-design.md>)

### AI overview

A tutorial on implementing infinite scrolling with Next.js, Supabase, and Framer Motion. It explains lazy loading ticket data in batches as the user scrolls, with techniques such as server-side rendering, code splitting, caching, prefetching, and debouncing to improve performance and user experience.

### Source excerpt

Lazy load and paginate data on scroll with Next.js and a sprinkle of Framer Motion magic ✨

## Icon Fonts, Popups and Infinite Scroll

DevFeed: [Icon Fonts, Popups and Infinite Scroll](<https://devfeed.tech/articles/icon-fonts-popups-and-infinite-scroll-19327.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/icon-fonts-popups-infinite-scroll/>)

Author: Shai Almog

Published: 2019-09-06T00:00:00Z

Content type: article

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [Icon font](<https://devfeed.tech/topics/icon-font.md>), [dialog](<https://devfeed.tech/topics/dialog.md>), [infinite scroll](<https://devfeed.tech/topics/infinite-scroll.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [icons](<https://devfeed.tech/tags/icons.md>), [integration](<https://devfeed.tech/tags/integration.md>)

### AI overview

This partial Codename One update describes easier arbitrary icon-font integration, updated material font constants, and a graphics-based popup arrow API with improved customization and cross-platform behavior. It also introduces infinite-scroll changes, although the supplied text is incomplete.

### Source excerpt

As I mentioned in the last post there are a lot of new features we need to go over and it will take time to cover everything. In fact this is still a partial list and there's a lot more on the way... Easier Icon Font Integration First off Thomas submitted a PR for a few new font icon methods: Specifically in Label he added: public void setFontIcon(Font font, char c); public void setFontIcon(Font font, char c, float size); And in FontImage he added:

## Advanced Performance Audits with DevTools

DevFeed: [Advanced Performance Audits with DevTools](<https://devfeed.tech/articles/advanced-performance-audits-with-devtools-21680.md>)

Original publisher: [Read original article](<https://paulirish.com/2015/advanced-performance-audits-with-devtools/>)

Author: Paul Irish

Published: 2015-03-27T15:46:00Z

Content type: article

Language: en

Sources: [Paul Irish](<https://devfeed.tech/sources/paul-irish.md>)

Topics: [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Latency](<https://devfeed.tech/topics/latency.md>), [infinite scroll](<https://devfeed.tech/topics/infinite-scroll.md>), [Google](<https://devfeed.tech/topics/google.md>)

Tags: [audits](<https://devfeed.tech/tags/audits.md>), [case-study](<https://devfeed.tech/tags/case-study.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [google](<https://devfeed.tech/tags/google.md>), [infinite-scroll](<https://devfeed.tech/tags/infinite-scroll.md>), [latency](<https://devfeed.tech/tags/latency.md>), [performance](<https://devfeed.tech/tags/performance.md>), [profiling](<https://devfeed.tech/tags/profiling.md>), [tooling](<https://devfeed.tech/tags/tooling.md>)

### AI overview

An advanced performance audit of real-world mobile and desktop websites using profiling and the 1000/100/6 performance model. It examines scrolling on CNET, CNET input latency, responsive challenges on Time.com, and infinite scroll on Google Play, with findings intended to improve developer practices, browser APIs, Chrome DevTools, and the Blink rendering engine.

### Source excerpt

Recently, I've spent some time recently profiling real-world mobile websites. Using the 1000/100/6 performance model1, and spelunking deep into each app, the findings have been fascinating. I've written up case study documents for each, incorporating all the findings: Illustrated diagnoses for the poor performance What actions the developer should take How Chrome's tooling should improve Questions and insights for the rendering engine (Blink) ➜ Perf Audits: CNet, Time, Google Play In this doc, we look at the scrolling of CNET, input latency on CNET, some very interesting challenges on the responsive Time.com, and infinite scroll on Google Play's desktop site. The intended audience is browser engineers and performance-minded frontend developers. It's fairly advanced, but I'm spelunking deep to identify how the sites butt heads with the browser APIs and architecture. Lastly, we're using this research to improve Chrome DevTools and what you hear from Chrome. Wikipedia eng team scrutinizing their performance millisecond by millisecond. (Yes, it's a long paper printout of the Chrome DevTools timeline flamechart :) Photo by Ori Livneh, CC BY 4.0 (BTW, use this link to view the same doc but with comments enabled) 1 - More on this performance model later. Stay tuned.