Immediately fetch assets after link clicked instead waiting onEnter state

[reksaandhika]

Describe the bug I wonder if I taxi.js behavior can fetch assets on click (not preload, because it's only for document not assets like image). To get a better understanding, you can check Barba.js behavior, they can fetch assets same time when user clicks the link, so no wasted time just waiting for the transition to run and get the assets onEnter.

To Reproduce Steps to reproduce the behavior:

1. Open dev tools (inspect element)
2. Go to network tab
3. Click link
4. See the assets will load when onEnter state

What I expect, when clicking link, assets will load simultaneously and no need to wait onEnter

Info

• Device: Desktop, Laptop, Phone
• OS: Windows and Mac OS
• Browser: Chrome and Safari
• Version: All version

Hope you understand what I mean, thank you!

Hi @reksaandhika.

I can move the fetch so it gets the document as soon as a navigation happens, but I personally always want a transition to have started and cover the screen before swapping any DOM around, and its the adding the new DOM to the page which triggers asset downloads.

For transitions like the features pages on barba (https://barba.js.org/features/futureproof/), I could move some things around in Taxi, allowing you to choose when to add your new DOM to the current document... I guess you would not do anything during the leave type events so that you could immediately append the new DOM somewhere hidden, and then wait until the assets have loaded to make it a seamless transition?

Sorry if the above sounds complicated!

Could you send me some examples of the transitions you want to achieve so I can recreate them in Taxi and see any issues?

[reksaandhika]

Hi Jake,

I don't want to build fancy seamless transition, just simple transition but want to immediately fetch assets after link is clicked because you can save much time with it (like example preload image, like Clou - this website is assets heavy, it will be greater if that transition process can trigger assets load after clicked, rather than waiting the transition finish).

You can notice Barba website on network console fetch assets right after link clicked not waiting the transition from left to right (and this process happen without swapping the content/DOM, it's natural behavior from the library).

https://user-images.githubusercontent.com/39384007/191074411-93970da9-4b35-4c29-ab4c-17a87d8b7036.mp4

Meanwhile, taxi website, waits for the transition sliding from left to right first, then fetch the assets.

https://user-images.githubusercontent.com/39384007/191075194-dcaa6ea4-ddd9-4131-a72c-3de87028e47c.mp4

It might looks like a small thing, but once we have this we can build an even more seamless transition and save more time and our website feels speedy, as a creative dev, I know you understand even just 1 second delay is meaningful for our website.

Thanks for the answer.

[jakewhiteley]

Ok, I will look into it as a minor point update as it won't be backwards compatible and is quite a change to the lifecycle.

[jakewhiteley]

@reksaandhika version 1.1.0 addresses and hopefully fixes all your concerns :)

The release ntoes:

Thanks to encouragement from @reksaandhika, this version fixes https://github.com/craftedbygc/taxi/issues/4 .

Taxi now starts loading media from the target page as soon as a link is clicked, instead of waiting for onEnter. This should increase percieved speed of your app 🎈

I also added a new argument to taxi.preload allowing this behaviour to be opt-in when preloading a URL.

Finally, a link's href is auotmatically fetched when a mouseenter or focus event is fired, further adding to percieved speed gains.