question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pagination Re-downloading All Images on Page Each Trigger

See original GitHub issue

Describe the bug

I’m using Sprig for pagination, using the Pagination Recipe from the Cookbook, and outside of the component, in the template the component is included in, there are a few images, and with the Network tab open in dev tools I noticed that every time I click through the pagination the browser re-downloads all of the images from the template (again, outside of the component) — images it downloaded on initial page load. It seems like this should definitely be avoided. Other assets like CSS and JS files are not being re-downloaded. After testing around a bit I realized that if I remove the s-push-url attribute from the buttons that updates the URL then the browser doesn’t download all of the images outside of the component, just the images inside the component. This still seems less than ideal, but is there any way around it?

To reproduce

Steps to reproduce the behaviour:

  1. Create a component template and paste in the example component code exactly from the pagination recipe.
  2. Include that component in a template, and make sure {{ sprig.script }} is included somewhere in the template.
  3. Make sure there is an image or two included somewhere else on the page.
  4. Navigate to the page with the pagination component and pull up the Network tab in Dev Tools to monitor images downloaded.
  5. Click through the pagination and note that all of the other images on the page downloaded on initial page load are re-downloaded every time you trigger a refresh of the component by clicking through the pagination.

Expected behaviour

I would expect that images outside of the component would not need to be re-downloaded. It would be great if images included in the component were also not re-downloaded when the pagination landed on a page previously loaded as well, but that I would understand.

Screenshots

Screen Recording showing the behavior

Versions

  • Plugin version: 1.8.1
  • Craft version: 3.7.11

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
bencrokercommented, Sep 9, 2021

Ok, well if it comes up again then let me know.

0reactions
itsmattsoriacommented, Sep 9, 2021

@bencroker oh man, I think this is a false alarm actually. Since you mentioned that it was not happening for the example on the cookbook I took a look and for me it actually was happening (screen recording), and then it occurred to me to try it out on other browsers, which I should have done to begin with. I was experiencing the issue in Brave, but then tested it in Safari, Firefox and Chrome (Canary) and none of those browsers were re-downloading the images, so it seems it’s either a Brave AJAX issue or maybe an htmx + Brave issue. Either way, not here, but I appreciate you looking into it!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Scrape and Download Images from any Website
Using the power of web scraping, you can scrape a list of all the images on a website and download them to your...
Read more >
6 Ways to Scrape Images Easily from Web Pages or Websites
Click “select all” - ”Save as” : Now you are getting all the images from the website!
Read more >
Gridview pagination. "Download All" Only downloads current ...
When I click on Download All button it was downloading all the files correctly. BUT after I added the pagination the download all...
Read more >
How to Scrape and Download Images from any Website
Get ParseHub for free: http://bit.ly/2MLwgFkHere's how to use a free web scraper to download all the images from a specific website.0:00 ...
Read more >
UI cheat sheet: pagination, infinite scroll and the load more ...
Infinite scroll tricks you into thinking that everything has been downloaded, but is, in fact, downloading as you scroll. Think Instagram. Load ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found