X-Ray Loaders

We all know skeleton loaders (those familiar grey placeholders that fill time). But there’s a newer pattern emerging in modern apps that feels more intentional and more human. Interfaces that preview what comes next before you’ve even signed in.

I’m calling this the X-Ray Loader.

Most authentication flows are hard transitions. You click Sign in and suddenly land in a blank state with no cues, no continuity, and no reassurance that you’re on the right track.

A tiny preview changes that. When the system hints at where you’re going, friction drops and trust rises. It tells the user, “We know why you’re here, and we’re already preparing your space”.

Atlassian captures the referring domain as a URL parameter, which lets the login screen render a subtle preview of the product you’re returning to.

Coming from Jira? You see Jira cues. From Confluence? You see Confluence styling.
It feels continuous, not jarring.

Lucidchart takes a visual approach. On the login screen, a faint animated background shows the name of the document you were trying to open.

It bridges the gap between the last thing you touched and the screen asking for your password.

Both examples show a shift from “loaders that pass time” to “loaders that preserve intent”.

Maybe!

You could call it a pre-contextual loader or a low-fidelity content preview. But the name matters. I’m coining this the X-Ray Loader because it captures the feeling of the interaction perfectly.

Skeletons hint at layout. X-rays reveal the structure beneath. This pattern isn’t about animating a future UI; it’s about exposing the bones of the destination.

Think of the login screen as being deliberately unisolated. When the user is bounced from a product page (say, their Jira dashboard) to the central sign-in flow, we don't just send them to /login. We send them to something like:

/login?**from=jira**&**dest=/browse/project-x**

The entire mechanism hinges on passing non-sensitive context in the URL query string. We don't need their account ID or any private data. We just need the referring domain (jira) or the destination path (/browse/project-x).

The front-end code on the login page can then check for those parameters. It says, "Ah, you're coming from Jira. I'll load the subtle Jira-themed styles while you type your password."

This lightweight metadata can instantly prime the visual experience, ensuring continuity with what the user intended to do next.

Here’s a look at the essential code that enables this X-ray vision:

// Get url params and load xray
const params = new URLSearchParams(window.location.search);
const referrerURL = params.get('from');   // e.g., "jira.atlassian.com"
const destinationPath = params.get('dest'); // e.g., "/browse/project-x"

if (referrerURL) {
  // Use the referrer (Jira/Confluence) to apply product branding.
  const productName = referrerURL.split('.')[0]; 
  document.body.classList.add(`xray--brand-${productName}`);
}

if (destinationPath) {
  // Use the destination path (settings/dashboard) to load a layout hint.
  const topLevelView = destinationPath.split('/')[1]; // Gets 'browse' from /browse/project-x
  document.body.classList.add(`xray--layout-${topLevelView}`);
}

// Show the combined context overlay
if (referrerURL || destinationPath) {
  showXrayOverlay(); 
}

• Context is King
  Transitional screens shouldn’t be blind to the rest of the system.
• Preserve Intent
  Shift from loaders that simply fill time to loaders that maintain the user’s workflow.
• Design for In-between States
  Transitions are where users feel the seams of our systems. Building continuous, thoughtful experiences in these "in-between moments" also builds trust.

X-Ray Loaders are a small act of empathy. Small acts add up. 💪