diff --git a/packages/@react-spectrum/ai/src/loader/react.tsx b/packages/@react-spectrum/ai/src/loader/react.tsx
index 05ae431e1e9..877f69b2b6b 100644
--- a/packages/@react-spectrum/ai/src/loader/react.tsx
+++ b/packages/@react-spectrum/ai/src/loader/react.tsx
@@ -260,6 +260,19 @@ export function PixelLoader(props: PixelLoaderProps) {
   } = props;
   let isReducedMotion = useReducedMotion();
 
+  let ref = React.useRef<HTMLDivElement>(null);
+  let [isInView, setIsInView] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    let observer = new IntersectionObserver(([entry]) => setIsInView(entry.isIntersecting));
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
   // Normalize to a sequence.
   const sequence = React.useMemo(
     () => (Array.isArray(icon[0]) ? icon : [icon]) as Cell[][],
@@ -284,13 +297,14 @@ export function PixelLoader(props: PixelLoaderProps) {
 
   // Advance the sequence one icon per cycle while playing. Single-icon
   // loaders never start a timer — they're a pure infinite CSS loop.
+  let isAdvancing = isPlaying && isInView;
   React.useEffect(() => {
-    if (!isPlaying || !isSequence) {
+    if (!isAdvancing || !isSequence) {
       return undefined;
     }
     const id = setInterval(() => setTick(t => t + 1), duration);
     return () => clearInterval(id);
-  }, [isPlaying, isSequence, duration, sequence]);
+  }, [isAdvancing, isSequence, duration, sequence]);
 
   const animId = iconId(cells);
   const css = keyframesFor(cells, isReducedMotion);
@@ -314,6 +328,7 @@ export function PixelLoader(props: PixelLoaderProps) {
 
   return (
     <div
+      ref={ref}
       aria-hidden="true"
       className={className}
       style={{
@@ -326,7 +341,7 @@ export function PixelLoader(props: PixelLoaderProps) {
         forcedColorAdjust: 'none',
         willChange: 'opacity',
         ...(isPlaying && {
-          animation: `${animId}-group-o ${duration}ms linear ${iteration}`
+          animation: `${animId}-group-o ${duration}ms linear ${iteration} ${isInView ? 'running' : 'paused'}`
         })
       }}
       {...rest}>
@@ -368,8 +383,8 @@ export function PixelLoader(props: PixelLoaderProps) {
               ...(isPlaying &&
                 !isReducedMotion && {
                   animation:
-                    `${animId}-${i}-y ${duration}ms linear ${iteration}, ` +
-                    `${animId}-${i}-s ${duration}ms linear ${iteration}`,
+                    `${animId}-${i}-y ${duration}ms linear ${iteration} ${isInView ? 'running' : 'paused'}, ` +
+                    `${animId}-${i}-s ${duration}ms linear ${iteration} ${isInView ? 'running' : 'paused'}`,
                   willChange: 'transform'
                 })
             }}
diff --git a/packages/dev/s2-docs/pages/s2/ai-components.mdx b/packages/dev/s2-docs/pages/s2/ai-components.mdx
index 9a3b1ee27b2..d6ac0b1e0c4 100644
--- a/packages/dev/s2-docs/pages/s2/ai-components.mdx
+++ b/packages/dev/s2-docs/pages/s2/ai-components.mdx
@@ -588,19 +588,21 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function PresetLoader(props) {
   return (
-    <div className={style({height: 40})}>
+    <div className={style({height: 40})} >
+      {/*- begin highlight -*/}
       <PixelLoader
         {...props}
         /* PROPS */
       />
+      {/*- end highlight -*/}
     </div>
-  )
+  );
 }
 ```
 
 ### Usage
 
-Use the `pixelLoader` prop on `PromptTokenField` and `ResponseStatusTitle` to display the pixel loader.
+Use the `pixelLoader` prop on `ResponseStatusTitle` and `PromptTokenField` to display the pixel loader.
 
 <ExampleSwitcher type={null} examples={['ResponseStatus', 'PromptField']}>