From ebbf71484ac3064eceded03ac77e444d5fbd00fc Mon Sep 17 00:00:00 2001
From: Simo <simo@6529.io>
Date: Mon, 30 Mar 2026 14:22:59 +0200
Subject: [PATCH] wip

Signed-off-by: Simo <simo@6529.io>
---
 .../MemesQuickVoteDialog.test.tsx             | 149 +++++++++++++++++-
 .../MemesQuickVoteDescription.tsx             |   4 +-
 .../memes-quick-vote/MemesQuickVoteDialog.tsx | 133 +++++++++++++++-
 .../MemesQuickVotePreview.tsx                 | 106 +++++++++----
 .../media/DropListItemContentMedia.tsx        |   5 +
 .../media/DropListItemContentMediaImage.tsx   |   7 +-
 .../view/item/content/media/MediaDisplay.tsx  |  35 +++-
 .../item/content/media/MediaDisplayImage.tsx  |  12 +-
 .../item/content/media/mediaLoadStrategy.ts   |   1 +
 hooks/useMemesQuickVoteDialogController.ts    |   2 +
 hooks/useMemesQuickVoteQueue.ts               |  16 ++
 11 files changed, 422 insertions(+), 48 deletions(-)
 create mode 100644 components/drops/view/item/content/media/mediaLoadStrategy.ts

diff --git a/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx b/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx
index 28fd47ae23..e7c5373280 100644
--- a/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx
+++ b/__tests__/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.test.tsx
@@ -40,7 +40,13 @@ const useIsMobileScreenMock = useIsMobileScreen as jest.MockedFunction<
   typeof useIsMobileScreen
 >;
 
-const createDrop = (serialNo: number) =>
+const createDrop = (
+  serialNo: number,
+  mediaOverrides?: Partial<{
+    mime_type: string;
+    url: string;
+  }>
+) =>
   ({
     id: `drop-${serialNo}`,
     serial_no: serialNo,
@@ -73,6 +79,7 @@ const createDrop = (serialNo: number) =>
           {
             mime_type: "image/png",
             url: "https://example.com/drop.png",
+            ...mediaOverrides,
           },
         ],
       },
@@ -106,6 +113,27 @@ describe("MemesQuickVoteDialog", () => {
     ...overrides,
   });
 
+  const createDialogProps = (
+    overrides: Partial<React.ComponentProps<typeof MemesQuickVoteDialog>> = {}
+  ): React.ComponentProps<typeof MemesQuickVoteDialog> => ({
+    activeDrop,
+    hasDiscoveryError: false,
+    isExhausted: false,
+    isOpen: true,
+    latestUsedAmount: 250,
+    nextDrop: null,
+    onClose: jest.fn(),
+    recentAmounts: [250, 500],
+    remainingCount: 9,
+    retryDiscovery: jest.fn(),
+    sessionId: 1,
+    skipDrop: jest.fn(),
+    submitVote: jest.fn().mockResolvedValue(true),
+    uncastPower: 5_000,
+    votingLabel: "votes",
+    ...overrides,
+  });
+
   beforeAll(() => {
     Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
       configurable: true,
@@ -435,6 +463,67 @@ describe("MemesQuickVoteDialog", () => {
     });
   });
 
+  it("renders a hidden preloaded next card for preload-safe media", () => {
+    render(
+      <MemesQuickVoteDialog
+        {...createDialogProps({
+          nextDrop: createDrop(43),
+        })}
+      />
+    );
+
+    expect(
+      screen.getByTestId("quick-vote-preview-card-next")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("quick-vote-preview-card-preloaded")
+    ).toBeInTheDocument();
+  });
+
+  it("removes the hidden preloaded next card when the dialog closes", () => {
+    const nextDrop = createDrop(43);
+    const { rerender } = render(
+      <MemesQuickVoteDialog {...createDialogProps({ nextDrop })} />
+    );
+
+    expect(
+      screen.getByTestId("quick-vote-preview-card-next")
+    ).toBeInTheDocument();
+
+    rerender(
+      <MemesQuickVoteDialog
+        {...createDialogProps({
+          isOpen: false,
+          nextDrop,
+        })}
+      />
+    );
+
+    expect(
+      screen.queryByTestId("quick-vote-preview-card-next")
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not preload hidden GLB next drops", () => {
+    render(
+      <MemesQuickVoteDialog
+        {...createDialogProps({
+          nextDrop: createDrop(43, {
+            mime_type: "model/gltf-binary",
+            url: "https://example.com/drop.glb",
+          }),
+        })}
+      />
+    );
+
+    expect(
+      screen.queryByTestId("quick-vote-preview-card-next")
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("quick-vote-preview-card-preloaded")
+    ).not.toBeInTheDocument();
+  });
+
   it("submits the visible quick amount from the mobile action row", async () => {
     useIsMobileScreenMock.mockReturnValue(true);
     const submitVote = jest.fn().mockResolvedValue(true);
@@ -456,7 +545,56 @@ describe("MemesQuickVoteDialog", () => {
 
   it("resets dialog-local controls when the session id changes", () => {
     const { rerender } = render(
-      <MemesQuickVoteDialog isOpen={true} sessionId={1} onClose={jest.fn()} />
+      <MemesQuickVoteDialog {...createDialogProps()} />
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Custom amount",
+      })
+    );
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "777" },
+    });
+
+    expect(screen.getByRole("textbox")).toHaveValue("777");
+
+    rerender(<MemesQuickVoteDialog {...createDialogProps({ sessionId: 2 })} />);
+
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+  });
+
+  it("resets dialog-local controls when the dialog closes and reopens", () => {
+    const onClose = jest.fn();
+    const { rerender } = render(
+      <MemesQuickVoteDialog {...createDialogProps({ onClose })} />
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Custom amount",
+      })
+    );
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "777" },
+    });
+
+    expect(screen.getByRole("textbox")).toHaveValue("777");
+
+    rerender(
+      <MemesQuickVoteDialog
+        {...createDialogProps({ isOpen: false, onClose })}
+      />
+    );
+    rerender(<MemesQuickVoteDialog {...createDialogProps({ onClose })} />);
+
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+  });
+
+  it("resets dialog-local controls when the active drop changes", () => {
+    const nextActiveDrop = createDrop(43);
+    const { rerender } = render(
+      <MemesQuickVoteDialog {...createDialogProps()} />
     );
 
     fireEvent.click(
@@ -471,7 +609,12 @@ describe("MemesQuickVoteDialog", () => {
     expect(screen.getByRole("textbox")).toHaveValue("777");
 
     rerender(
-      <MemesQuickVoteDialog isOpen={true} sessionId={2} onClose={jest.fn()} />
+      <MemesQuickVoteDialog
+        {...createDialogProps({
+          activeDrop: nextActiveDrop,
+          remainingCount: 8,
+        })}
+      />
     );
 
     expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
diff --git a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx
index 87a52ff5bd..a3927c9aa7 100644
--- a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx
+++ b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDescription.tsx
@@ -3,10 +3,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 interface MemesQuickVoteDescriptionProps {
+  readonly allowToggle?: boolean | undefined;
   readonly description: string;
 }
 
 export default function MemesQuickVoteDescription({
+  allowToggle = true,
   description,
 }: MemesQuickVoteDescriptionProps) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -97,7 +99,7 @@ export default function MemesQuickVoteDescription({
       >
         {description}
       </p>
-      {isOverflowing && (
+      {allowToggle && isOverflowing && (
         <button
           type="button"
           aria-expanded={isExpanded}
diff --git a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.tsx b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.tsx
index 1b04f9974d..702e1e2188 100644
--- a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.tsx
+++ b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVoteDialog.tsx
@@ -33,22 +33,135 @@ interface MemesQuickVoteDialogContentProps {
   readonly activeDrop: NonNullable<MemesQuickVoteDialogProps["activeDrop"]>;
   readonly isMobile: boolean;
   readonly latestUsedAmount: number | null;
+  readonly nextDrop: MemesQuickVoteDialogProps["nextDrop"];
   readonly onClose: () => void;
   readonly remainingCount: number;
   readonly recentAmounts: number[];
+  readonly sessionId: number;
   readonly submitVote: MemesQuickVoteDialogProps["submitVote"];
   readonly skipDrop: MemesQuickVoteDialogProps["skipDrop"];
   readonly uncastPower: number | null;
   readonly votingLabel: string | null;
 }
 
+function getQuickVotePreloadedNextDrop(
+  isOpen: boolean,
+  nextDrop: MemesQuickVoteDialogProps["nextDrop"]
+): MemesQuickVoteDialogProps["nextDrop"] {
+  if (!isOpen || !nextDrop) {
+    return null;
+  }
+
+  const artworkMedia = nextDrop.parts.at(0)?.media.at(0);
+  const mediaMimeType = artworkMedia?.mime_type.toLowerCase();
+  const mediaUrl = artworkMedia?.url.toLowerCase();
+  const isGlbMedia =
+    mediaMimeType === "model/gltf-binary" ||
+    mediaMimeType === "model/gltf+json" ||
+    mediaUrl?.endsWith(".glb") ||
+    mediaUrl?.endsWith(".gltf");
+
+  return isGlbMedia ? null : nextDrop;
+}
+
+function MemesQuickVotePreviewStack({
+  activeDrop,
+  isBusy,
+  isMobile,
+  nextDrop,
+  onAdvanceStart,
+  onSkip,
+  onVoteWithSwipe,
+  remainingCount,
+  sessionId,
+  swipeVoteAmount,
+  uncastPower,
+  votingLabel,
+}: {
+  readonly activeDrop: NonNullable<MemesQuickVoteDialogProps["activeDrop"]>;
+  readonly isBusy: boolean;
+  readonly isMobile: boolean;
+  readonly nextDrop: MemesQuickVoteDialogProps["nextDrop"];
+  readonly onAdvanceStart: () => void;
+  readonly onSkip: () => void;
+  readonly onVoteWithSwipe: () => void;
+  readonly remainingCount: number;
+  readonly sessionId: number;
+  readonly swipeVoteAmount: number | null;
+  readonly uncastPower: number | null;
+  readonly votingLabel: string | null;
+}) {
+  const preloadedCardRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const preloadedCard = preloadedCardRef.current;
+
+    if (!preloadedCard) {
+      return;
+    }
+
+    preloadedCard.setAttribute("inert", "");
+
+    return () => {
+      preloadedCard.removeAttribute("inert");
+    };
+  }, [nextDrop]);
+
+  return (
+    <div className="tw-relative tw-h-full tw-w-full">
+      {nextDrop && (
+        <div
+          ref={preloadedCardRef}
+          aria-hidden="true"
+          className="tw-pointer-events-none tw-absolute tw-inset-0 tw-overflow-hidden tw-opacity-0"
+          data-testid="quick-vote-preview-card-next"
+        >
+          <MemesQuickVotePreview
+            key={`next:${sessionId}:${nextDrop.id}`}
+            drop={nextDrop}
+            isBusy={false}
+            isMobile={isMobile}
+            remainingCount={remainingCount}
+            renderMode="preloaded"
+            swipeVoteAmount={swipeVoteAmount}
+            uncastPower={uncastPower}
+            votingLabel={votingLabel}
+            onAdvanceStart={() => undefined}
+            onSkip={() => undefined}
+            onVoteWithSwipe={() => undefined}
+          />
+        </div>
+      )}
+
+      <div className="tw-relative tw-z-10 tw-h-full">
+        <MemesQuickVotePreview
+          key={`active:${sessionId}:${activeDrop.id}`}
+          drop={activeDrop}
+          isBusy={isBusy}
+          isMobile={isMobile}
+          remainingCount={remainingCount}
+          renderMode="active"
+          swipeVoteAmount={swipeVoteAmount}
+          uncastPower={uncastPower}
+          votingLabel={votingLabel}
+          onAdvanceStart={onAdvanceStart}
+          onSkip={onSkip}
+          onVoteWithSwipe={onVoteWithSwipe}
+        />
+      </div>
+    </div>
+  );
+}
+
 function MemesQuickVoteDialogContent({
   activeDrop,
   isMobile,
   latestUsedAmount,
+  nextDrop,
   onClose,
   remainingCount,
   recentAmounts,
+  sessionId,
   submitVote,
   skipDrop,
   uncastPower,
@@ -211,11 +324,13 @@ function MemesQuickVoteDialogContent({
       {isMobile ? (
         <div className="tw-relative tw-z-10 tw-flex tw-min-h-0 tw-w-full tw-flex-1 tw-flex-col tw-overflow-hidden">
           <div className="tw-min-h-0 tw-flex-1">
-            <MemesQuickVotePreview
-              drop={activeDrop}
+            <MemesQuickVotePreviewStack
+              activeDrop={activeDrop}
               isBusy={isControlsSubmitting}
               isMobile={isMobile}
+              nextDrop={nextDrop}
               remainingCount={remainingCount}
+              sessionId={sessionId}
               swipeVoteAmount={swipeVoteAmount}
               uncastPower={uncastPower}
               votingLabel={votingLabel}
@@ -273,11 +388,13 @@ function MemesQuickVoteDialogContent({
       ) : (
         <>
           <div className="tw-min-h-0 tw-flex-1 md:tw-min-h-0 md:tw-border-y-0 md:tw-border-b-0 md:tw-border-l-0 md:tw-border-r md:tw-border-solid md:tw-border-white/10">
-            <MemesQuickVotePreview
-              drop={activeDrop}
+            <MemesQuickVotePreviewStack
+              activeDrop={activeDrop}
               isBusy={isControlsSubmitting}
               isMobile={isMobile}
+              nextDrop={nextDrop}
               remainingCount={remainingCount}
+              sessionId={sessionId}
               swipeVoteAmount={swipeVoteAmount}
               uncastPower={uncastPower}
               votingLabel={votingLabel}
@@ -410,6 +527,7 @@ export default function MemesQuickVoteDialog({
   hasDiscoveryError,
   isExhausted,
   latestUsedAmount,
+  nextDrop,
   recentAmounts,
   remainingCount,
   retryDiscovery,
@@ -487,15 +605,20 @@ export default function MemesQuickVoteDialog({
   } else if (!activeDrop) {
     dialogBody = <MemesQuickVoteDialogSkeleton />;
   } else {
+    const contentResetKey = `${sessionId}:${activeDrop.id}:${isOpen ? "open" : "closed"}`;
+    const preloadedNextDrop = getQuickVotePreloadedNextDrop(isOpen, nextDrop);
+
     dialogBody = (
       <MemesQuickVoteDialogContent
-        key={`${sessionId}:${activeDrop.id}:${isOpen ? "open" : "closed"}`}
+        key={contentResetKey}
         activeDrop={activeDrop}
         isMobile={isMobile}
         latestUsedAmount={latestUsedAmount}
+        nextDrop={preloadedNextDrop}
         onClose={onClose}
         remainingCount={remainingCount}
         recentAmounts={recentAmounts}
+        sessionId={sessionId}
         submitVote={submitVote}
         skipDrop={skipDrop}
         uncastPower={uncastPower}
diff --git a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVotePreview.tsx b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVotePreview.tsx
index 1354b05b95..9778543a23 100644
--- a/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVotePreview.tsx
+++ b/components/brain/left-sidebar/waves/memes-quick-vote/MemesQuickVotePreview.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import DropListItemContentMedia from "@/components/drops/view/item/content/media/DropListItemContentMedia";
+import type { MediaLoadStrategy } from "@/components/drops/view/item/content/media/mediaLoadStrategy";
 import { formatNumberWithCommas } from "@/helpers/Helpers";
 import {
   getDropPreviewImageUrl,
@@ -22,6 +23,7 @@ interface MemesQuickVotePreviewProps {
   readonly isBusy: boolean;
   readonly isMobile: boolean;
   readonly remainingCount: number;
+  readonly renderMode: "active" | "preloaded";
   readonly swipeVoteAmount: number | null;
   readonly uncastPower: number | null;
   readonly votingLabel: string | null;
@@ -41,12 +43,14 @@ function getQuickVoteArtworkMediaContent({
   artworkMedia,
   hasTouchScreen,
   htmlPreviewImageUrl,
+  loadStrategy,
 }: {
   readonly artworkMedia:
     | ExtendedDrop["parts"][number]["media"][number]
     | undefined;
   readonly hasTouchScreen: boolean;
   readonly htmlPreviewImageUrl?: string | undefined;
+  readonly loadStrategy: MediaLoadStrategy;
 }): ReactNode {
   if (!artworkMedia) {
     return null;
@@ -57,9 +61,10 @@ function getQuickVoteArtworkMediaContent({
       media_mime_type={artworkMedia.mime_type}
       media_url={artworkMedia.url}
       isCompetitionDrop={true}
-      disableAutoPlay={hasTouchScreen}
+      disableAutoPlay={hasTouchScreen || loadStrategy === "eager"}
       disableModal={hasTouchScreen}
       htmlPreviewImageUrl={htmlPreviewImageUrl}
+      loadStrategy={loadStrategy}
     />
   );
 }
@@ -85,11 +90,13 @@ function MemesQuickVoteMobileSwipeSurface({
 }
 
 function MemesQuickVoteMobileDetails({
+  allowDescriptionToggle,
   description,
   drop,
   title,
   touchSurfaceProps,
 }: {
+  readonly allowDescriptionToggle: boolean;
   readonly description: string;
   readonly drop: ExtendedDrop;
   readonly title: string;
@@ -115,6 +122,7 @@ function MemesQuickVoteMobileDetails({
 
             {description && (
               <MemesQuickVoteDescription
+                allowToggle={allowDescriptionToggle}
                 key={drop.id}
                 description={description}
               />
@@ -127,12 +135,14 @@ function MemesQuickVoteMobileDetails({
 }
 
 function MemesQuickVoteMediaStage({
+  isInteractive,
   isMobile,
   mediaContent,
   swipeHint,
   swipeOffset,
   touchSurfaceProps,
 }: {
+  readonly isInteractive: boolean;
   readonly isMobile: boolean;
   readonly mediaContent: ReactNode;
   readonly swipeHint: string | null;
@@ -160,7 +170,8 @@ function MemesQuickVoteMediaStage({
         {mediaContent}
       </div>
 
-      {isMobile &&
+      {isInteractive &&
+        isMobile &&
         (["left", "right"] as const).map((side) => (
           <MemesQuickVoteMobileSwipeSurface
             key={side}
@@ -172,22 +183,26 @@ function MemesQuickVoteMediaStage({
           />
         ))}
 
-      <div
-        className={clsx(
-          "tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-4 tw-z-10 tw-flex tw-items-center tw-text-sm tw-font-semibold tw-text-rose-300 tw-transition-opacity md:tw-hidden",
-          swipeOffset < 0 ? "tw-opacity-100" : "tw-opacity-0"
-        )}
-      >
-        Skip
-      </div>
-      <div
-        className={clsx(
-          "tw-pointer-events-none tw-absolute tw-inset-y-0 tw-right-4 tw-z-10 tw-flex tw-items-center tw-text-right tw-text-sm tw-font-semibold tw-text-primary-300 tw-transition-opacity md:tw-hidden",
-          swipeOffset > 0 ? "tw-opacity-100" : "tw-opacity-0"
-        )}
-      >
-        {swipeHint ? `Vote ${swipeHint}` : "Vote"}
-      </div>
+      {isInteractive && (
+        <>
+          <div
+            className={clsx(
+              "tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-4 tw-z-10 tw-flex tw-items-center tw-text-sm tw-font-semibold tw-text-rose-300 tw-transition-opacity md:tw-hidden",
+              swipeOffset < 0 ? "tw-opacity-100" : "tw-opacity-0"
+            )}
+          >
+            Skip
+          </div>
+          <div
+            className={clsx(
+              "tw-pointer-events-none tw-absolute tw-inset-y-0 tw-right-4 tw-z-10 tw-flex tw-items-center tw-text-right tw-text-sm tw-font-semibold tw-text-primary-300 tw-transition-opacity md:tw-hidden",
+              swipeOffset > 0 ? "tw-opacity-100" : "tw-opacity-0"
+            )}
+          >
+            {swipeHint ? `Vote ${swipeHint}` : "Vote"}
+          </div>
+        </>
+      )}
     </div>
   );
 }
@@ -197,6 +212,7 @@ function MemesQuickVotePreviewContent({
   isBusy,
   isMobile,
   remainingCount,
+  renderMode,
   swipeVoteAmount,
   uncastPower,
   votingLabel,
@@ -204,6 +220,9 @@ function MemesQuickVotePreviewContent({
   onSkip,
   onVoteWithSwipe,
 }: MemesQuickVotePreviewProps) {
+  const isInteractive = renderMode === "active";
+  const loadStrategy: MediaLoadStrategy =
+    renderMode === "preloaded" ? "eager" : "in-view";
   const title =
     drop.metadata.find((entry) => entry.data_key === "title")?.data_value ??
     "Untitled submission";
@@ -213,9 +232,10 @@ function MemesQuickVotePreviewContent({
   const artworkMedia = drop.parts.at(0)?.media.at(0);
   const { hasTouchScreen } = useDeviceInfo();
   const isInteractiveHtmlMedia = artworkMedia?.mime_type === "text/html";
+  const previewImageUrl = getDropPreviewImageUrl(drop.metadata) ?? undefined;
   const htmlPreviewImageUrl =
-    isInteractiveHtmlMedia && hasTouchScreen
-      ? (getDropPreviewImageUrl(drop.metadata) ?? undefined)
+    isInteractiveHtmlMedia && (hasTouchScreen || renderMode === "preloaded")
+      ? previewImageUrl
       : undefined;
   const swipeHint = useMemo(() => {
     if (swipeVoteAmount === null) {
@@ -255,6 +275,7 @@ function MemesQuickVotePreviewContent({
     artworkMedia,
     hasTouchScreen,
     htmlPreviewImageUrl,
+    loadStrategy,
   });
   const mobileTouchSurfaceProps: MemesQuickVoteTouchSurfaceProps = {
     onTouchCancel: (event) => {
@@ -274,7 +295,11 @@ function MemesQuickVotePreviewContent({
   const previewCard = (
     <article
       ref={previewCardRef}
-      data-testid="quick-vote-preview-card"
+      data-testid={
+        renderMode === "active"
+          ? "quick-vote-preview-card"
+          : "quick-vote-preview-card-preloaded"
+      }
       data-quick-vote-transform={cardTransform ?? undefined}
       className={clsx(
         "tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-transition-all tw-duration-200 tw-ease-out",
@@ -288,10 +313,15 @@ function MemesQuickVotePreviewContent({
       onTransitionEnd={handleCardTransitionEnd}
     >
       <div
-        data-testid="quick-vote-preview-mobile-context"
+        data-testid={
+          renderMode === "active"
+            ? "quick-vote-preview-mobile-context"
+            : "quick-vote-preview-mobile-context-preloaded"
+        }
         className="tw-flex tw-h-full tw-flex-col md:tw-flex md:tw-min-h-0 md:tw-flex-1 md:tw-p-0"
       >
         <MemesQuickVoteMediaStage
+          isInteractive={isInteractive}
           isMobile={isMobile}
           mediaContent={mediaContent}
           swipeHint={swipeHint}
@@ -300,6 +330,7 @@ function MemesQuickVotePreviewContent({
         />
 
         <MemesQuickVoteMobileDetails
+          allowDescriptionToggle={isInteractive}
           description={description}
           drop={drop}
           title={title}
@@ -311,25 +342,34 @@ function MemesQuickVotePreviewContent({
 
   return (
     <div className="tw-flex tw-h-full tw-flex-col">
-      <div data-testid="quick-vote-preview-status" className="tw-sr-only">
-        {swipeInstructionText && (
+      <div
+        data-testid={
+          renderMode === "active"
+            ? "quick-vote-preview-status"
+            : "quick-vote-preview-status-preloaded"
+        }
+        className="tw-sr-only"
+      >
+        {isInteractive && swipeInstructionText && (
           <span className="tw-sr-only">{swipeInstructionText}</span>
         )}
-        {typeof uncastPower === "number" && (
+        {isInteractive && typeof uncastPower === "number" && (
           <span className="tw-sr-only tw-text-primary-300">
             {formatNumberWithCommas(uncastPower)} {votingLabel ?? "votes"} left
           </span>
         )}
-        <span
-          aria-hidden="true"
-          className="tw-rounded-full tw-border tw-border-solid tw-border-white/5 tw-bg-white/[0.03] tw-px-4 tw-py-1.5 tw-text-[13px] tw-font-bold tw-text-iron-300 tw-shadow-sm tw-backdrop-blur-md"
-        >
-          {formatNumberWithCommas(remainingCount)} unrated
-        </span>
+        {isInteractive && (
+          <span
+            aria-hidden="true"
+            className="tw-rounded-full tw-border tw-border-solid tw-border-white/5 tw-bg-white/[0.03] tw-px-4 tw-py-1.5 tw-text-[13px] tw-font-bold tw-text-iron-300 tw-shadow-sm tw-backdrop-blur-md"
+          >
+            {formatNumberWithCommas(remainingCount)} unrated
+          </span>
+        )}
       </div>
 
       <div className="tw-relative tw-min-h-0 tw-flex-1">
-        {canUseSwiperTouchSurface ? (
+        {isInteractive && canUseSwiperTouchSurface ? (
           <Swiper
             initialSlide={MOBILE_SWIPE_CENTER_SLIDE_INDEX}
             slidesPerView={1}
@@ -364,5 +404,5 @@ function MemesQuickVotePreviewContent({
 export default function MemesQuickVotePreview(
   props: MemesQuickVotePreviewProps
 ) {
-  return <MemesQuickVotePreviewContent key={props.drop.id} {...props} />;
+  return <MemesQuickVotePreviewContent {...props} />;
 }
diff --git a/components/drops/view/item/content/media/DropListItemContentMedia.tsx b/components/drops/view/item/content/media/DropListItemContentMedia.tsx
index 8dff10622c..4144e7531e 100644
--- a/components/drops/view/item/content/media/DropListItemContentMedia.tsx
+++ b/components/drops/view/item/content/media/DropListItemContentMedia.tsx
@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
 import DropListItemContentMediaAudio from "./DropListItemContentMediaAudio";
 import { ImageScale } from "@/helpers/image.helpers";
+import type { MediaLoadStrategy } from "./mediaLoadStrategy";
 
 import DropListItemContentMediaImage from "./DropListItemContentMediaImage";
 import DropListItemContentMediaVideo from "./DropListItemContentMediaVideo";
@@ -36,6 +37,7 @@ export default function DropListItemContentMedia({
   imageScale = ImageScale.AUTOx800,
   htmlIframeContainerClassName,
   htmlPreviewImageUrl,
+  loadStrategy = "in-view",
 }: {
   readonly media_mime_type: string;
   readonly media_url: string;
@@ -47,6 +49,7 @@ export default function DropListItemContentMedia({
   readonly imageScale?: ImageScale | undefined;
   readonly htmlIframeContainerClassName?: string | undefined;
   readonly htmlPreviewImageUrl?: string | undefined;
+  readonly loadStrategy?: MediaLoadStrategy | undefined;
 }) {
   const getMediaType = (): MediaType => {
     if (media_mime_type.includes("image")) {
@@ -84,6 +87,7 @@ export default function DropListItemContentMedia({
           disableModal={disableModal}
           imageObjectPosition={imageObjectPosition}
           imageScale={imageScale}
+          loadStrategy={loadStrategy}
         />
       );
     case MediaType.VIDEO:
@@ -106,6 +110,7 @@ export default function DropListItemContentMedia({
           previewImageUrl={htmlPreviewImageUrl}
           requireInteractionToLoad={disableAutoPlay}
           iframeContainerClassName={htmlIframeContainerClassName}
+          loadStrategy={loadStrategy}
         />
       );
     case MediaType.UNKNOWN:
diff --git a/components/drops/view/item/content/media/DropListItemContentMediaImage.tsx b/components/drops/view/item/content/media/DropListItemContentMediaImage.tsx
index 50f270e2fa..681699d2d8 100644
--- a/components/drops/view/item/content/media/DropListItemContentMediaImage.tsx
+++ b/components/drops/view/item/content/media/DropListItemContentMediaImage.tsx
@@ -18,6 +18,7 @@ import { createPortal } from "react-dom";
 import { Tooltip } from "react-tooltip";
 import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+import type { MediaLoadStrategy } from "./mediaLoadStrategy";
 
 const tooltipProps = {
   delayShow: 250,
@@ -36,6 +37,7 @@ function DropListItemContentMediaImage({
   disableModal = false,
   imageObjectPosition,
   imageScale = ImageScale.AUTOx450,
+  loadStrategy = "in-view",
 }: {
   readonly src: string;
   readonly maxRetries?: number | undefined;
@@ -44,6 +46,7 @@ function DropListItemContentMediaImage({
   readonly disableModal?: boolean | undefined;
   readonly imageObjectPosition?: string | undefined;
   readonly imageScale?: ImageScale | undefined;
+  readonly loadStrategy?: MediaLoadStrategy | undefined;
 }) {
   const [ref, inView] = useInView<HTMLDivElement>();
   const [loaded, setLoaded] = useState(false);
@@ -121,6 +124,7 @@ function DropListItemContentMediaImage({
     left: "50%",
     transform: "translate(-50%, -50%)",
   };
+  const shouldLoadImage = loadStrategy === "eager" || inView;
 
   useKeyPressEvent("Escape", () => {
     if (!disableModal) {
@@ -301,7 +305,7 @@ function DropListItemContentMediaImage({
           />
         )}
 
-        {inView && errorCount <= maxRetries && (
+        {shouldLoadImage && errorCount <= maxRetries && (
           <FallbackImage
             key={retryTick}
             ref={imgRef}
@@ -309,6 +313,7 @@ function DropListItemContentMediaImage({
             fallbackSrc={src}
             alt="Drop media"
             fill
+            loading={loadStrategy === "eager" ? "eager" : undefined}
             sizes="(max-width: 768px) 100vw, 768px"
             className={`tw-max-h-full tw-max-w-full ${
               !loaded ? "tw-opacity-0" : "tw-opacity-100"
diff --git a/components/drops/view/item/content/media/MediaDisplay.tsx b/components/drops/view/item/content/media/MediaDisplay.tsx
index 33e67c0191..3f15ea6d2f 100644
--- a/components/drops/view/item/content/media/MediaDisplay.tsx
+++ b/components/drops/view/item/content/media/MediaDisplay.tsx
@@ -11,6 +11,7 @@ import { ImageScale } from "@/helpers/image.helpers";
 import MediaDisplayAudio from "./MediaDisplayAudio";
 import MediaDisplayImage from "./MediaDisplayImage";
 import MediaDisplayVideo from "./MediaDisplayVideo";
+import type { MediaLoadStrategy } from "./mediaLoadStrategy";
 
 enum MediaType {
   IMAGE = "IMAGE",
@@ -136,6 +137,7 @@ export default function MediaDisplay({
   previewImageUrl,
   requireInteractionToLoad = false,
   iframeContainerClassName,
+  loadStrategy = "in-view",
 }: {
   readonly media_mime_type: string;
   readonly media_url: string;
@@ -144,6 +146,7 @@ export default function MediaDisplay({
   readonly previewImageUrl?: string | null | undefined;
   readonly requireInteractionToLoad?: boolean | undefined;
   readonly iframeContainerClassName?: string | undefined;
+  readonly loadStrategy?: MediaLoadStrategy | undefined;
 }) {
   const getMediaType = (): MediaType => {
     if (media_mime_type.includes("image")) {
@@ -172,9 +175,23 @@ export default function MediaDisplay({
   const mediaType = getMediaType();
 
   if (mediaType === MediaType.HTML) {
+    if (loadStrategy === "eager") {
+      return previewImageUrl ? (
+        <MediaDisplayImage
+          src={previewImageUrl}
+          imageScale={imageScale}
+          loadStrategy={loadStrategy}
+        />
+      ) : null;
+    }
+
     if (previewImageUrl && !requireInteractionToLoad) {
       return (
-        <MediaDisplayImage src={previewImageUrl} imageScale={imageScale} />
+        <MediaDisplayImage
+          src={previewImageUrl}
+          imageScale={imageScale}
+          loadStrategy={loadStrategy}
+        />
       );
     }
 
@@ -191,12 +208,24 @@ export default function MediaDisplay({
   }
 
   if (previewImageUrl && mediaType !== MediaType.IMAGE) {
-    return <MediaDisplayImage src={previewImageUrl} imageScale={imageScale} />;
+    return (
+      <MediaDisplayImage
+        src={previewImageUrl}
+        imageScale={imageScale}
+        loadStrategy={loadStrategy}
+      />
+    );
   }
 
   switch (mediaType) {
     case MediaType.IMAGE:
-      return <MediaDisplayImage src={media_url} imageScale={imageScale} />;
+      return (
+        <MediaDisplayImage
+          src={media_url}
+          imageScale={imageScale}
+          loadStrategy={loadStrategy}
+        />
+      );
     case MediaType.VIDEO:
       return (
         <MediaDisplayVideo
diff --git a/components/drops/view/item/content/media/MediaDisplayImage.tsx b/components/drops/view/item/content/media/MediaDisplayImage.tsx
index 0b3562ddf4..af9ac30fc3 100644
--- a/components/drops/view/item/content/media/MediaDisplayImage.tsx
+++ b/components/drops/view/item/content/media/MediaDisplayImage.tsx
@@ -5,16 +5,23 @@ import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers";
 import useDeviceInfo from "@/hooks/useDeviceInfo";
 import { useInView } from "@/hooks/useInView";
 import React, { useCallback, useState } from "react";
+import type { MediaLoadStrategy } from "./mediaLoadStrategy";
 
 interface Props {
   readonly src: string;
   readonly imageScale?: ImageScale | undefined;
+  readonly loadStrategy?: MediaLoadStrategy | undefined;
 }
 
-function MediaDisplayImage({ src, imageScale = ImageScale.AUTOx1080 }: Props) {
+function MediaDisplayImage({
+  src,
+  imageScale = ImageScale.AUTOx1080,
+  loadStrategy = "in-view",
+}: Props) {
   const [ref, inView] = useInView<HTMLDivElement>();
   const [isLoading, setIsLoading] = useState(true);
   const { hasTouchScreen } = useDeviceInfo();
+  const shouldLoadImage = loadStrategy === "eager" || inView;
 
   const handleImageLoad = useCallback(() => {
     setIsLoading(false);
@@ -44,13 +51,14 @@ function MediaDisplayImage({ src, imageScale = ImageScale.AUTOx1080 }: Props) {
           style={loadingPlaceholderStyle}
         />
       )}
-      {inView && (
+      {shouldLoadImage && (
         <FallbackImage
           primarySrc={getScaledImageUri(src, imageScale)}
           fallbackSrc={src}
           alt="Media content"
           optimize={false}
           fill
+          loading={loadStrategy === "eager" ? "eager" : undefined}
           sizes="(max-width: 768px) 100vw, 600px"
           className={`tw-max-w-full tw-object-contain ${
             isLoading ? "tw-opacity-0" : "tw-opacity-100"
diff --git a/components/drops/view/item/content/media/mediaLoadStrategy.ts b/components/drops/view/item/content/media/mediaLoadStrategy.ts
new file mode 100644
index 0000000000..444c8e2085
--- /dev/null
+++ b/components/drops/view/item/content/media/mediaLoadStrategy.ts
@@ -0,0 +1 @@
+export type MediaLoadStrategy = "eager" | "in-view";
diff --git a/hooks/useMemesQuickVoteDialogController.ts b/hooks/useMemesQuickVoteDialogController.ts
index 9d7251e09a..74f0e1ec99 100644
--- a/hooks/useMemesQuickVoteDialogController.ts
+++ b/hooks/useMemesQuickVoteDialogController.ts
@@ -12,6 +12,7 @@ export type MemesQuickVoteDialogState = Pick<
   | "hasDiscoveryError"
   | "isExhausted"
   | "latestUsedAmount"
+  | "nextDrop"
   | "recentAmounts"
   | "remainingCount"
   | "retryDiscovery"
@@ -96,6 +97,7 @@ export const useMemesQuickVoteDialogController =
         isExhausted: quickVoteQueue.isExhausted,
         isOpen: isQuickVoteOpen,
         latestUsedAmount: quickVoteQueue.latestUsedAmount,
+        nextDrop: quickVoteQueue.nextDrop,
         onClose: closeQuickVote,
         recentAmounts: quickVoteQueue.recentAmounts,
         remainingCount: quickVoteQueue.remainingCount,
diff --git a/hooks/useMemesQuickVoteQueue.ts b/hooks/useMemesQuickVoteQueue.ts
index bffafb9510..e6bc3ec39a 100644
--- a/hooks/useMemesQuickVoteQueue.ts
+++ b/hooks/useMemesQuickVoteQueue.ts
@@ -57,6 +57,7 @@ export type UseMemesQuickVoteQueueResult = {
   readonly isLoading: boolean;
   readonly isReady: boolean;
   readonly latestUsedAmount: number | null;
+  readonly nextDrop: ExtendedDrop | null;
   readonly recentAmounts: number[];
   readonly remainingCount: number;
   readonly retryDiscovery: () => void;
@@ -637,6 +638,7 @@ export const useMemesQuickVoteQueue = ({
   }, [pendingDropIds]);
 
   const activeApiDrop = session.sessionState.currentDrop;
+  const nextApiDrop = session.sessionState.lookaheadDrops[0] ?? null;
   const effectiveOptimisticRemainingPower =
     getEffectiveOptimisticRemainingPower({
       activeApiDrop,
@@ -658,6 +660,19 @@ export const useMemesQuickVoteQueue = ({
   const activeDrop = isMemesQuickVoteVoteableDrop(activeDropCandidate)
     ? activeDropCandidate
     : null;
+  const nextDropCandidate = useMemo(() => {
+    if (!nextApiDrop) {
+      return null;
+    }
+
+    return clampDropMaxRating(
+      convertApiDropToExtendedDrop(nextApiDrop),
+      effectiveOptimisticRemainingPower
+    );
+  }, [effectiveOptimisticRemainingPower, nextApiDrop]);
+  const nextDrop = isMemesQuickVoteVoteableDrop(nextDropCandidate)
+    ? nextDropCandidate
+    : null;
   const latestUsedAmount = recentAmountsByRecency.at(-1) ?? null;
   const recentAmounts = getDisplayQuickVoteAmounts(recentAmountsByRecency);
 
@@ -668,6 +683,7 @@ export const useMemesQuickVoteQueue = ({
     isLoading: session.sessionState.isLoading && activeDrop === null,
     isReady: activeDrop !== null,
     latestUsedAmount,
+    nextDrop,
     recentAmounts,
     remainingCount: session.sessionState.totalCount,
     retryDiscovery: () => {