Show loader instead of not-found for mobile annotation deep-links

When deep-linking directly to an annotation on mobile before anything is
cached, the document and its annotations take a few seconds to load. During
that window the mobile Annotation sheet resolved the selected id against an
empty annotation set and rendered "This annotation is no longer available.",
wrongly implying the annotation was gone.

Thread the document loader's loading flag into MobileAnnotationDetail and
render a subtle spinning loader while loading is true and the annotation is
not yet resolved. The not-found message now only appears once loading settles
and the annotation is still unresolved.

Author: claude

CHANGELOG.md

@@ -9,6 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Mobile annotation deep-link showed "no longer available" instead of a loader during the initial uncached load (2026-06).**
+  Navigating directly to an annotation on mobile (e.g. `cite.opensource.legal/d/...?ann=<id>`)
+  before anything is cached takes a few seconds while the document and its
+  annotations are fetched. During that window the mobile "Annotation" sheet
+  (`frontend/src/components/knowledge_base/document/layouts/mobile/MobileAnnotationDetail.tsx`)
+  resolved the selected id against an empty annotation set and rendered
+  "This annotation is no longer available." — wrongly implying the annotation
+  was gone. The component had no access to a loading signal, so it could not
+  distinguish "still fetching" from "not found". Fix: thread the document
+  loader's `loading` flag from `MobileDocumentLayout.tsx` into
+  `MobileAnnotationDetail`; while `loading` is true and the annotation is not
+  yet resolved, render a subtle spinning loader ("Loading annotation…") instead
+  of the not-found message. The not-found state now only appears once loading
+  settles and the annotation is still unresolved.
+
 - **Deep-research and conversation-memory Celery tasks were never registered on the worker (2026-06).**
   `run_deep_research` (`opencontractserver/tasks/research_tasks.py`) and the
   memory tasks `check_conversations_for_curation` / `curate_corpus_memory`

frontend/src/components/knowledge_base/document/layouts/MobileDocumentLayout.tsx

@@ -480,7 +480,7 @@ export const MobileDocumentLayout: React.FC<DocumentLayoutProps> = (props) => {
           title="Annotation"
           onClose={() => setSelectedAnnotations([])}
         >
-          <MobileAnnotationDetail readOnly={readOnly} />
+          <MobileAnnotationDetail readOnly={readOnly} loading={loading} />
         </MobileSheet>
       </Root>
     </FullScreenModal>

frontend/src/components/knowledge_base/document/layouts/mobile/MobileAnnotationDetail.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+import { Loader2 } from "lucide-react";
 
 import { OS_LEGAL_COLORS } from "../../../../../assets/configurations/osLegalStyles";
 import { MOBILE_RADIUS, MOBILE_SHADOW } from "./mobileTheme";
@@ -22,6 +23,34 @@ const EmptyState = styled.div`
   text-align: center;
 `;
 
+const spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+/**
+ * Subtle, calm loading affordance shown while the document (and its
+ * annotations) are still being fetched — e.g. a deep-link straight to an
+ * annotation before anything is cached. A quietly spinning icon over the
+ * sheet's white surface, never a heavy full-bleed spinner.
+ */
+const LoadingState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 40px 16px;
+  font-size: 14px;
+  color: ${OS_LEGAL_COLORS.textSecondary};
+  text-align: center;
+
+  svg {
+    color: ${OS_LEGAL_COLORS.accent};
+    animation: ${spin} 0.9s linear infinite;
+  }
+`;
+
 /**
  * Mobile frame for the shared {@link HighlightItem} detail.
  *
@@ -66,6 +95,13 @@ const Card = styled.div`
 interface MobileAnnotationDetailProps {
   /** Read-only mode disables editing capabilities (delete). */
   readOnly: boolean;
+  /**
+   * True while the document (and its annotations) are still being fetched.
+   * Threaded from the document loader so a deep-link straight to an annotation
+   * — before anything is cached — shows a loader instead of prematurely
+   * claiming the annotation is gone.
+   */
+  loading: boolean;
 }
 
 /**
@@ -85,6 +121,7 @@ interface MobileAnnotationDetailProps {
  */
 export const MobileAnnotationDetail: React.FC<MobileAnnotationDetailProps> = ({
   readOnly,
+  loading,
 }) => {
   const { selectedAnnotations } = useAnnotationSelection();
   const allAnnotations = useAllAnnotations();
@@ -99,12 +136,25 @@ export const MobileAnnotationDetail: React.FC<MobileAnnotationDetailProps> = ({
   const annotation = useMemo(
     () =>
       [...allAnnotations, ...(structuralAnnotations || [])].find(
-        (a) => a.id === selectedId
+        (a) => a.id === selectedId,
       ) ?? null,
-    [allAnnotations, structuralAnnotations, selectedId]
+    [allAnnotations, structuralAnnotations, selectedId],
   );
 
   if (!annotation) {
+    // While the document/annotations are still loading (e.g. a deep-link
+    // straight to an annotation before anything is cached), the selected id
+    // simply hasn't arrived yet — show a loader rather than wrongly reporting
+    // the annotation as gone. Only once loading settles and it's still
+    // unresolved do we treat it as unavailable.
+    if (loading) {
+      return (
+        <LoadingState>
+          <Loader2 size={22} aria-hidden />
+          Loading annotation…
+        </LoadingState>
+      );
+    }
     return <EmptyState>This annotation is no longer available.</EmptyState>;
   }