[Demo] Infinite Scroll 2/2 #1887
Conversation
|
I just tested it, and it works perfectly! 👏 |
| <p> | ||
| Let's focus on two aspects. But first, <code>did you scroll</code> all the way to the end? | ||
| <br> | ||
| You might have missed some important details about performance... 🍿 |
There was a problem hiding this comment.
Maybe we could explain the performance details you mention, I don't get what you are thinking about 🙃
There was a problem hiding this comment.
The "750ms delay" ... there is a pragraph at the end of the grid
| 🐯 For the previous page results, we add one fake item | ||
| corresponding to the last item of the previous page, | ||
| with the same `id`. This allows the **addition of new elements** after the existing ones. |
There was a problem hiding this comment.
Maybe we could go a little deeper here and explain what morphism is and what morphism does with this same id?
And I think this part should be after the observer part?
There was a problem hiding this comment.
Maybe we could go a little deeper here and explain what morphism is and what morphism does with this same id?
I think this would require a dedicated page (and i have the perfect slide for this remember ? 😆 )
There was a problem hiding this comment.
And I think this part should be after the observer part?
Oh i remember now... we need to define why the div 'previous' / 'current' / 'next' at first, because elsewhen this is impossible to understand ... :/
To be honest i'm not entirely ok with the final result, and i really want to create something more interactive / steps by steps highlither, etc..
I'd say "this is ok" for this one, but i'm really trying a lot of things these days to "more"
| {% if not this.hasMore %} | ||
| <div style="display: grid; place-content: center;padding-block: 2rem;"> | ||
| <div style="max-width: 36rem;"> | ||
| <h4>Did you know?</h4> | ||
| <p> | ||
| This demo adds a fixed delay of <code>750ms</code> before each page load to simulate slow | ||
| network conditions. Or maybe just to let you enjoy the sweet animations... 🍿 | ||
| </p> | ||
| <p>Wonder how it would feel without? Why not get the code and try it yourself?</p> | ||
| </div> | ||
| </div> | ||
| {% endif %} |
There was a problem hiding this comment.
This is the performance thing @WebMamba :)
kbond
force-pushed
the
demo/infinite-scroll-2
branch
from
ed52382 to
a23123c
Compare
|
Looks great, thanks Simon! |
This took some time but.... what a beautiful collection of TShirts 😸