<portal> will allow us to break down single page applications into multiple projects while still offering an amazing page transition experiences. But we need to start from the beginning on why existing SPA have such poor page transition experience in the first place.

Loading experience matters

Loading HTML pages take time and if controlled poorly will results in flash of unstyled content, layout shift and a poor user experience.

Loading experience can be improved by inlining critical CSS, optimizing WebFont loading, image/embed placeholders, code splitting an above the fold bundle and loading spinners (throbbers).

While poor loading experiences are suffered greatly by users with low powered device and bad networks; improving the loading experience impacts everybody. Networks are unreliable and have varied performance. Imagine only having half a webpage loaded while enter a train tunnel. Aghast! That would leave us stranded with nothing to do but talk to a fellow human.

The page transition opportunity

In the perfect world with a single page application (SPA), users only experience HTML page loading once per session. But as that SPA gets too big and more teams need to work on it at the same time, there becomes a need to split up the SPA into multiple projects, I.E. a multi page application (MPA).

While more loading experiences need to be designed for multi page applications, it also presents an opportunity to create a page transition experience. With MPAs designers are in control of both the start and end page. Page transitions can become meaningful experiences.

A better future with <portal>

A new HTML element <portal> is being proposed to make it easier to implement page transitions. <portal> are almost identical to <iframe>, except one additional trick up its sleeve. <portal> can be activated to replace the current window but without a reload. This trick allows one to replace a loading experience with a perfect jank-free page transition!

On the other hand, while<iframe> can be preloaded before rendering to avoid the loading experience and even animated along with the current page; when we actually load the next webpage with window.location = someIframe.src, our users end up suffering another load experience.

To see this in action here is a demo with the same page transition but implemented as both <portal> and <iframe>

Note the demo requires Chrome as that is the only browser that has implemented <portal>. Full instructions are in the demo.

Dirty design hacks

While we wait for <portal> to become standardized and implemented across all browsers, what is the best page transition experience we can offer right now?

We can effectively hide the page load if have a shared interstitial from the current page to the next.

A simple example is fading the current page to black, performing the page load into a black page, and then fade in the new content. Advanced versions would be an on brand full screen loading animation. The animation doesn't need to be long and obnoxious, there just needs to be a sensible moment for the interstitial.

Are you excited to build loading experiences and page transitions? We'd like to hear from you, Battlefy is hiring.