🚪The Portal Component

With the <Portal> component you can force all view transitions through an intermediate portal page. View this in action on the demo page.

Why would I use this component?
How does it work?
Usage

Why would I use this component?

You have some pages that will take long to load? You can not prefetch them or don’t want to? You might place loading indicators on your pages, see Loading Demo↗. But if you want to have a more elaborated loading experience, you can use the Portal component.

This component allows you to have the loading animation on a separate page and it forces all transition through that page, stopping there until the target page is loaded.

You can use this to quickly display a skeleton page, perhaps copying parts of the old page as persisted elements to the portal page and then on to the target page.

How does it work?

When the user clicks a link, submits a form or uses the browser’s back and forward buttons, the Portal component will intercept the navigation. Instead of navigating from A to B there will be two view transitions: One from A to the portal page followed by a view transition from the portal page to B.

Usage

Install astro-vtbot in your project running npx astro add astro-vtbot or npm install astro-vtbot.

The <Portal> component can be put in the <head> of those pages that have a <ViewTransitions /> component. If you want a transition from A to B got through the portal page, you must place the <Portal>component on A. The portal page is not automatically used in the reverse direction. If you also want to see the portal page on links from B to A - or when navigating back through the browser history - you must also insert the <Portal> component on page B.

1
---
2
import { ViewTransitions } from 'astro:transitions';
3
import Portal from 'astro-vtbot/components/Portal.astro';
4
---
5
<html>
6
  <head>
7
    <ViewTransitions />
8
    <Portal page="/portal/page">
9
    ...
10
  </head>
11
  ...
12
</html>

The component has a single property page that specifies the URL of the portal page. The portal page must have a <ViewTransitions /> component in its <head> as well. If you want to support transition groups and persisted elements, you must also include them on the portal page. The portal page from the demo, which has been stripped of its styling, could serve as an example here:

1
---
2
import Layout from 'src/layouts/Layout.astro';
3
import 'src/css/light-dark.css';
4
---
5
<Layout title="PortalPage">
6
  <div transition:name="content">
7
    <h1 transition:name="heading">The Portal Page</h1>
8
    <p>This is a page that automatically intercepts each navigation.</p>
9
    <p>It can show an entertaining animation while the target page is still loading.</p>
10
    <div>Loading</div>
11
  </div>
12
</Layout>

🚪The Portal Component

Contents

Why would I use this component?

How does it work?

Usage