fix fetch loop

app/at/(trail)/[handle]/trail/[rkey]/StopEmbed.tsx

···
 "use client";
 
-import { use } from "react";
+import { use, createContext } from "react";
 import type { ExternalEmbed } from "@/data/queries";
 import { LinkPreview } from "./LinkPreview";
 import { BlueskyPostEmbed } from "./embeds/BlueskyPostEmbed";
···
 
 type EmbedPromise = Promise<BlueskyPost | LinkMetadata | React.ReactElement | null>;
 export type EmbedCache = Map<string, EmbedPromise>;
+export const EmbedCacheContext = createContext<[EmbedCache | null, (c: EmbedCache) => void]>([
+  null,
+  () => {},
+]);
 
 type Props = {
   external: ExternalEmbed;
-  cache: EmbedCache;
   onDelete?: () => void;
 };
 
···
   return promise;
 }
 
-export function StopEmbed({ external, cache, onDelete }: Props) {
-  if (typeof window === "undefined") {
-    throw new Error("Client only");
-  }
+export function StopEmbed({ external, onDelete }: Props) {
+  const [cache] = use(EmbedCacheContext);
+  if (!cache) throw new Error("StopEmbed must be used within EmbedCacheContext.Provider");
 
   const uri = external.uri;
   const isTrail = isTrailUri(uri);

app/at/(trail)/[handle]/trail/[rkey]/TrailStopCard.tsx

···
 "use client";
 
-import { Suspense, useState, useCallback } from "react";
+import { Suspense, use, useCallback } from "react";
 import { useEditMode } from "./EditModeContext";
 import type { TrailStop } from "@/data/queries";
-import { StopEmbed, type EmbedCache } from "./StopEmbed";
+import { EmbedCacheContext, StopEmbed } from "./StopEmbed";
 import { extractLink } from "./utils/linkExtraction";
 import { getLinkMetadata, blueskyUrlToAtUri } from "./utils/embed-resolver";
 import "./TrailStopCard.css";
···
   const isEditing = !!editContext;
   const updateStop = editContext?.updateStop;
   const error = editContext?.inlineErrors[stop.tid];
-  const [embedCache, setEmbedCache] = useState<EmbedCache>(() => new Map());
+  const [, setEmbedCache] = use(EmbedCacheContext);
 
   const textareaRef = useCallback((el: HTMLTextAreaElement | null) => {
     if (el) {
···
             <Suspense fallback={<EmbedLoading />}>
               <StopEmbed
                 external={stop.external}
-                cache={embedCache}
                 onDelete={isEditing ? handleRemoveLink : undefined}
               />
             </Suspense>

app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.tsx

···
-import { useState, useLayoutEffect, useRef, Suspense, Activity } from "react";
+import { useState, useLayoutEffect, useRef, Suspense, Activity, type ReactNode } from "react";
 import { useRouter } from "next/navigation";
 import type { TrailDetailData } from "@/data/queries";
 import { BackButton } from "@/app/BackButton";
···
 import { TrailWalkersOverlay } from "./TrailWalkersOverlay";
 import { visitStop, completeTrail, abandonWalk, deleteCompletion } from "@/data/actions";
 import { useAuthAction } from "@/auth/useAuthAction";
+import type { EmbedCache } from "./StopEmbed";
 import "./TrailWalk.css";
+
+import { EmbedCacheContext } from "./StopEmbed";
+
+function RevealedStop({ revealed, children }: { revealed: boolean; children: ReactNode }) {
+  const cacheAndSetCache = useState<EmbedCache>(() => new Map());
+  return (
+    <EmbedCacheContext value={cacheAndSetCache}>
+      <Activity mode={revealed ? "visible" : "hidden"}>{children}</Activity>
+    </EmbedCacheContext>
+  );
+}
 
 type Props = {
   trail: TrailDetailData;
···
               const isVisited =
                 !isCompleted && index > currentStopIndex && index <= furthestStopIndex;
               const isUnreached = index > furthestStopIndex;
-              const isHidden = !isCompleted && !isEditMode && isUnreached;
 
               const isClickable =
                 isEditMode ||
···
               const isReorderActive = isEditMode && isCurrent && !isHoveringStopContent;
 
               return (
-                <Activity key={stop.tid} mode={isHidden ? "hidden" : "visible"}>
+                <RevealedStop key={stop.tid} revealed={isCompleted || isEditMode || !isUnreached}>
                   <div
                     onPointerEnter={() => {
                       setIsHoveringStopContent(true);
···
                       onContinue={handleContinue}
                     />
                   </div>
-                </Activity>
+                </RevealedStop>
               );
             })}
           </div>