https://github.com/bahrus/lazy-loop

https://github.com/bahrus/lazy-loop

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/bahrus/lazy-loop
• Owner: bahrus
• License: mit
• Created: 2021-02-07T22:38:21.000Z (over 4 years ago)
• Default Branch: baseline
• Last Pushed: 2021-02-23T12:59:29.000Z (over 4 years ago)
• Last Synced: 2025-02-01T22:17:05.382Z (4 months ago)
• Size: 5.86 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# lazy-loop

[content-visibility](https://web.dev/content-visibility/) may solve some problems effectively, but I'm not yet convinced content-visibility fixes all issues -- I've looked at some scenarios (like a server-rendered, fully expanded details/summary tree as well as a simple ui/li list), and I'm just not able to replicate the savings from content-visibility.  

lazy-loop generates a lazy list of non-nested (custom) elements.  To provide nested content, the user of lazy-loop will need to encapsulate that nested content via a custom element (with or without ShadowDOM).  It combines two other custom elements, i-bid and laissez-dom.  It essentially creates a facade of i-bid, but with support for lazy loading.

Like i-bid, lazy-loop can work in tandem with server-rendered HTML.  However, it is more client-side centric, in that the content in generates (can be) generated from a [streamed](https://web.dev/streams/) source of data, which can be partitioned into "pages" of grouped data.  These pages are lazy loaded into the DOM when scrolled into view.

```html



    
header

        

    
Item 1

    
Item 2

    ...

    
Item 99

    



```


produces, after passing in a corresponding list to lazy-loop:

```html



    
header

    

    
Item 1

    
Item 2

    ...

    
Item 99

    

    

        

            

        

    

    

        

            

        

    

    
footer



laissez-dom {

    min-height: 1000px;

}

```

lazy-loop passes the "page" of data to i-bid after laissez-dom becomes visible (and exposes the template contents).