From 145e917ed79776306c6e87255cd118efc54971be Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@raffauflabs.com>
Date: Thu, 23 Jul 2026 10:13:39 -0400
Subject: [PATCH] better loading

---
 src/components/actor-app.tsx | 48 ++++++++++++++++++++++++------------
 src/styles/globals.css       | 32 ++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx
index e10ef81..87d975b 100644
--- a/src/components/actor-app.tsx
+++ b/src/components/actor-app.tsx
@@ -397,6 +397,7 @@ type StatePageProps = {
   label: string;
   seed: string;
   title: string;
+  variant: "error" | "loading" | "not-found";
 };
 
 function StatePage({
@@ -404,16 +405,24 @@ function StatePage({
   title,
   description,
   seed,
+  variant,
   children,
 }: StatePageProps) {
   return (
-    <main className="state-page min-h-screen p-4 sm:p-8">
+    <main
+      className={`state-page state-page--${variant} min-h-screen p-4 sm:p-8`}
+      aria-busy={variant === "loading"}
+    >
       <div className="state-content mx-auto max-w-2xl">
         <a className="state-masthead" href="/">
           haunt.at
         </a>
 
-        <section className="state-reading" aria-labelledby="state-title">
+        <section
+          className="state-reading"
+          aria-labelledby="state-title"
+          role={variant === "loading" ? "status" : undefined}
+        >
           <HauntSigil seed={seed} />
           <p className="state-label">{label}</p>
           <h1 id="state-title">{title}</h1>
@@ -428,10 +437,11 @@ function StatePage({
 function LoadingPage({ seed }: { seed: string }) {
   return (
     <StatePage
-      label="resolving"
-      title="Finding a presence"
-      description="Following the public record to its source."
+      label="summoning"
+      title="Summoning presence"
+      description="Resolving its true name."
       seed={seed}
+      variant="loading"
     />
   );
 }
@@ -439,14 +449,13 @@ function LoadingPage({ seed }: { seed: string }) {
 function ErrorPage({ message, seed }: { message: string; seed: string }) {
   return (
     <StatePage
-      label="unresolved"
-      title="No presence found"
+      label="summoning failed"
+      title="No presence answered"
       description={message}
       seed={seed}
+      variant="error"
     >
-      <a className="state-action" href="/">
-        return to haunt
-      </a>
+      <StateReturnLink />
     </StatePage>
   );
 }
@@ -454,14 +463,21 @@ function ErrorPage({ message, seed }: { message: string; seed: string }) {
 function NotFoundPage() {
   return (
     <StatePage
-      label="lost path"
-      title="This path leads nowhere"
-      description="Haunt pages begin with a handle or DID."
+      label="path unresolved"
+      title="Nothing answers here"
+      description="A haunt begins with a handle or DID."
       seed="lost-path"
+      variant="not-found"
     >
-      <a className="state-action" href="/">
-        return to haunt
-      </a>
+      <StateReturnLink />
     </StatePage>
   );
 }
+
+function StateReturnLink() {
+  return (
+    <a className="state-action" href="/">
+      return to compendium
+    </a>
+  );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 56dfc53..750bdd0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -75,6 +75,15 @@ body {
   max-width: 25rem;
 }
 
+.state-page--loading .state-reading {
+  animation: state-reading-enter 240ms ease-out 180ms forwards;
+  opacity: 0;
+}
+
+.state-page--loading .haunt-sigil {
+  animation: state-sigil-summon 2.4s ease-in-out 420ms infinite;
+}
+
 .home-sigil,
 .state-reading .haunt-sigil {
   height: var(--home-sigil-size);
@@ -111,6 +120,19 @@ body {
   padding-bottom: 0.15rem;
 }
 
+@keyframes state-reading-enter {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes state-sigil-summon {
+  50% {
+    opacity: 0.58;
+    transform: scale(0.985);
+  }
+}
+
 .haunt-sigil {
   color: var(--sigil-color, #9cc6d1);
   fill: none;
@@ -391,3 +413,13 @@ body {
     animation: atmosphere-drift 28s ease-in-out infinite alternate;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .state-page--loading .state-reading {
+    animation-duration: 1ms;
+  }
+
+  .state-page--loading .haunt-sigil {
+    animation: none;
+  }
+}
-- 
2.51.2