Fix pending animation docs safari (#7073)

* Fix pending animation docs safari

* Extract code for progress circle into a collapsed component

---------

Co-authored-by: Devon Govett <[email protected]>

Author: snowystinger

packages/react-aria-components/docs/Button.mdx

@@ -170,7 +170,6 @@ Make sure to internationalize the `aria-label` you pass to the [ProgressBar](Pro
 
 ```tsx example
 import {useState} from 'react';
-import {ProgressBar, Text} from 'react-aria-components';
 
 function PendingButton(props) {
   let [isPending, setPending] = useState(false);
@@ -189,13 +188,10 @@ function PendingButton(props) {
       onPress={handlePress}>
         {({isPending}) => (
           <>
-            {!isPending && <Text>Save</Text>}
+            {!isPending && <span>Save</span>}
             {isPending && (
-              <ProgressBar aria-label="Saving..." isIndeterminate>
-                <svg width="16" height="16" style={{display: 'block'}}>
-                  <use href="#spinner" />
-                </svg>
-              </ProgressBar>
+              // See below
+              <MyProgressCircle aria-label="Saving..." isIndeterminate />
             )}
           </>
         )}
@@ -204,19 +200,29 @@ function PendingButton(props) {
 }
 ```
 
-```tsx snippet hidden
-<svg>
-  <defs>
-    <g id="spinner" transform="scale(0.66)">
-      <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
-      <path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
-        <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
-      </path>
-    </g>
-  </defs>
-</svg>
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> MyProgressCircle</summary>
+
+```tsx example render=false export=true
+import {ProgressBar} from 'react-aria-components';
+import type {ProgressBarProps} from 'react-aria-components';
+
+function MyProgressCircle(props: ProgressBarProps) {
+  return (
+    <ProgressBar {...props}>
+      <svg width="16" height="16" viewBox="0 0 24 24" style={{display: 'block'}}>
+        <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
+        <path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
+          <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
+        </path>
+      </svg>
+    </ProgressBar>
+  );
+}
 ```
 
+</details>
+
 ### Accessibility
 
 **Note:**
@@ -252,13 +258,9 @@ function PendingDelayed(props) {
       style={{position: 'relative'}}>
         {({isPending}) => (
           <>
-            <Text className={isPending ? 'pending' : undefined}>Save</Text>
+            <span className={isPending ? 'pending' : undefined}>Save</span>
             {isPending && (
-              <ProgressBar aria-label="in progress" isIndeterminate className="spinner">
-                <svg width="16" height="16" style={{display: 'block'}}>
-                  <use href="#spinner" />
-                </svg>
-              </ProgressBar>
+              <MyProgressCircle aria-label="in progress" isIndeterminate className="spinner" />
             )}
           </>
         )}