X-Ray Loaders

We all know skeleton loaders (those familiar grey placeholders that fill time). But I'm noticing a newer, quieter pattern emerge in modern apps that feels more human. These are interfaces that give you a hint of what’s next, before you’ve even signed in.

I’m calling this the X-Ray Loader.

Most authentication screens are hard transitions. You click “Sign in” and are suddenly dropped into a blank, isolated state. No context, no cues, no reassurance you’re in the right place.

But when the system gives you a tiny preview of where you’re headed, it lowers friction and increases trust. It tells you, “We know why you’re here, and we’re already preparing your space.”

Atlassian does this well. Their login flow captures the referring domain as a URL parameter, which allows the interface to render an x-ray view of the product you’re returning to. If you came from Jira, you’ll see Jira branding and tone; from Confluence, you’ll see Confluence cues. The experience feels tailored and continuous.

Lucidchart takes a more visual approach. On their login screen, an animated background faintly displays the name of the project you were trying to open. It’s subtle, but it bridges the gap between the last thing you clicked and the screen that’s asking for your password.

Both cases show an important shift: from loaders that simply fill time to loaders that preserve intent.

Maybe!

The term pre-contextual loader or low-fidelity content preview might already exist. But naming matters. I’m coining this the X-Ray Loader because it captures the feeling of the interaction perfectly.

A skeleton shows a moving structure of what's coming, but an x-ray is a static glimpse of the bones beneath. This pattern isn't about animating a future state; it's about seeing the fundamental structure (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
  Intentionally design and engineer transitional screens to be aware of the rest of the system.
• Preserve Intent
  Shift the focus from loaders that simply fill time to loaders that preserve the user's workflow and intent.
• 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.

It’s a small act of empathy, and those are the ones that add up.