Merge pull request #3478 from Shopify/thumbnail-callbacks

Add onLoad callback example for Thumbnail component

Author: davebcn87

packages/ui-extensions/src/surfaces/admin/components/Thumbnail/examples/with-event-handling.html

@@ -1,5 +1,9 @@
-<s-thumbnail
-  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
-  alt="Product"
-  size="base"
-></s-thumbnail>
+  <s-stack direction="inline" gap="base">
+    <s-thumbnail
+      src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+      alt="Product"
+      size="small-200"
+      onLoad="setLoading(false)"
+    />
+    <s-paragraph>Image loaded</s-paragraph>
+ </s-stack>

packages/ui-extensions/src/surfaces/admin/components/Thumbnail/examples/with-event-handling.jsx

@@ -1,5 +1,13 @@
-<s-thumbnail
-  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
-  alt="Product"
-  size="base"
- />
+const [loading, setLoading] = useState(true)
+
+return (
+  <s-stack direction="inline" gap="base" alignItems="center">
+    <s-thumbnail
+      src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+      alt="Product"
+      size="small-200"
+      onLoad={() => setLoading(false)}
+    />
+    <s-paragraph>{loading ? 'Loading...' : 'Image loaded'}</s-paragraph>
+ </s-stack>
+)