@instructure/ui-avatar 10.24.3-snapshot-2 → 10.24.3-snapshot-5

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.24.3-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-2) (2025-08-18)
+## [10.24.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-5) (2025-08-19)
 
-**Note:** Version bump only for package @instructure/ui-avatar
+
+### Bug Fixes
+
+* **ui-avatar:** avatar now renders images correctly when using SSR ([7d8cc62](https://github.com/instructure/instructure-ui/commit/7d8cc6203bb850e1bed77cf5e85cf9ddeb03306a))
 
 
 

package/es/Avatar/index.js

@@ -24,7 +24,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  */
 
 import { useStyle } from '@instructure/emotion';
-import { useState, useEffect, forwardRef } from 'react';
+import { useState, useEffect, forwardRef, useRef } from 'react';
 import { View } from '@instructure/ui-view';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
 import generateStyle from './styles';
@@ -43,7 +43,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
   showBorder = 'auto',
   shape = 'circle',
   display = 'inline-block',
-  onImageLoaded = _event => {},
+  onImageLoaded,
   src,
   name,
   renderIcon,
@@ -54,6 +54,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
   elementRef,
   ...rest
 }, ref) => {
+  const imgRef = useRef(null);
   const _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loaded = _useState2[0],
@@ -79,6 +80,11 @@ const Avatar = /*#__PURE__*/forwardRef(({
     if (loaded && !src) {
       setLoaded(false);
     }
+    // Image already loaded (common in SSR)
+    if (src && !loaded && imgRef.current && imgRef.current.complete) {
+      setLoaded(true);
+      onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded();
+    }
   }, [loaded, src]);
   const makeInitialsFromName = () => {
     if (!name || typeof name !== 'string') {
@@ -97,7 +103,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
   };
   const handleImageLoaded = event => {
     setLoaded(true);
-    onImageLoaded(event);
+    onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded(event);
   };
   const renderInitials = () => {
     return _jsx("span", {
@@ -142,6 +148,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
     children: [_jsx("img", {
       // This is visually hidden and is here for loading purposes only
       src: src,
+      ref: imgRef,
       css: styles === null || styles === void 0 ? void 0 : styles.loadImage,
       alt: alt,
       onLoad: handleImageLoaded,
@@ -149,5 +156,6 @@ const Avatar = /*#__PURE__*/forwardRef(({
     }), !loaded && renderContent()]
   });
 });
+Avatar.displayName = 'Avatar';
 export default Avatar;
 export { Avatar };

package/lib/Avatar/index.js

@@ -49,7 +49,7 @@ category: components
   showBorder = 'auto',
   shape = 'circle',
   display = 'inline-block',
-  onImageLoaded = _event => {},
+  onImageLoaded,
   src,
   name,
   renderIcon,
@@ -60,6 +60,7 @@ category: components
   elementRef,
   ...rest
 }, ref) => {
+  const imgRef = (0, _react.useRef)(null);
   const _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     loaded = _useState2[0],
@@ -85,6 +86,11 @@ category: components
     if (loaded && !src) {
       setLoaded(false);
     }
+    // Image already loaded (common in SSR)
+    if (src && !loaded && imgRef.current && imgRef.current.complete) {
+      setLoaded(true);
+      onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded();
+    }
   }, [loaded, src]);
   const makeInitialsFromName = () => {
     if (!name || typeof name !== 'string') {
@@ -103,7 +109,7 @@ category: components
   };
   const handleImageLoaded = event => {
     setLoaded(true);
-    onImageLoaded(event);
+    onImageLoaded === null || onImageLoaded === void 0 ? void 0 : onImageLoaded(event);
   };
   const renderInitials = () => {
     return (0, _jsxRuntime.jsx)("span", {
@@ -148,6 +154,7 @@ category: components
     children: [(0, _jsxRuntime.jsx)("img", {
       // This is visually hidden and is here for loading purposes only
       src: src,
+      ref: imgRef,
       css: styles === null || styles === void 0 ? void 0 : styles.loadImage,
       alt: alt,
       onLoad: handleImageLoaded,
@@ -155,4 +162,5 @@ category: components
     }), !loaded && renderContent()]
   });
 });
+Avatar.displayName = 'Avatar';
 var _default = exports.default = Avatar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-avatar",
-  "version": "10.24.3-snapshot-2",
+  "version": "10.24.3-snapshot-5",
   "description": "An image or letters that represents a user.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,19 +24,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.24.3-snapshot-2",
-    "@instructure/shared-types": "10.24.3-snapshot-2",
-    "@instructure/ui-icons": "10.24.3-snapshot-2",
-    "@instructure/ui-react-utils": "10.24.3-snapshot-2",
-    "@instructure/ui-testable": "10.24.3-snapshot-2",
-    "@instructure/ui-view": "10.24.3-snapshot-2",
+    "@instructure/emotion": "10.24.3-snapshot-5",
+    "@instructure/shared-types": "10.24.3-snapshot-5",
+    "@instructure/ui-icons": "10.24.3-snapshot-5",
+    "@instructure/ui-react-utils": "10.24.3-snapshot-5",
+    "@instructure/ui-testable": "10.24.3-snapshot-5",
+    "@instructure/ui-view": "10.24.3-snapshot-5",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.24.3-snapshot-2",
-    "@instructure/ui-babel-preset": "10.24.3-snapshot-2",
-    "@instructure/ui-color-utils": "10.24.3-snapshot-2",
-    "@instructure/ui-themes": "10.24.3-snapshot-2",
+    "@instructure/ui-axe-check": "10.24.3-snapshot-5",
+    "@instructure/ui-babel-preset": "10.24.3-snapshot-5",
+    "@instructure/ui-color-utils": "10.24.3-snapshot-5",
+    "@instructure/ui-themes": "10.24.3-snapshot-5",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^3.2.2"

package/src/Avatar/index.tsx

@@ -28,7 +28,8 @@ import {
   SyntheticEvent,
   useEffect,
   forwardRef,
-  ForwardedRef
+  ForwardedRef,
+  useRef
 } from 'react'
 
 import { View } from '@instructure/ui-view'
@@ -52,7 +53,7 @@ const Avatar = forwardRef(
       showBorder = 'auto',
       shape = 'circle',
       display = 'inline-block',
-      onImageLoaded = (_event: SyntheticEvent) => {},
+      onImageLoaded,
       src,
       name,
       renderIcon,
@@ -65,6 +66,7 @@ const Avatar = forwardRef(
     }: AvatarProps,
     ref: ForwardedRef<View>
   ) => {
+    const imgRef = useRef<HTMLImageElement>(null)
     const [loaded, setLoaded] = useState(false)
 
     const styles = useStyle({
@@ -89,6 +91,11 @@ const Avatar = forwardRef(
       if (loaded && !src) {
         setLoaded(false)
       }
+      // Image already loaded (common in SSR)
+      if (src && !loaded && imgRef.current && imgRef.current.complete) {
+        setLoaded(true)
+        onImageLoaded?.()
+      }
     }, [loaded, src])
 
     const makeInitialsFromName = () => {
@@ -110,7 +117,7 @@ const Avatar = forwardRef(
 
     const handleImageLoaded = (event: SyntheticEvent) => {
       setLoaded(true)
-      onImageLoaded(event)
+      onImageLoaded?.(event)
     }
 
     const renderInitials = () => {
@@ -157,6 +164,7 @@ const Avatar = forwardRef(
       >
         <img // This is visually hidden and is here for loading purposes only
           src={src}
+          ref={imgRef}
           css={styles?.loadImage}
           alt={alt}
           onLoad={handleImageLoaded}
@@ -167,6 +175,7 @@ const Avatar = forwardRef(
     )
   }
 )
+Avatar.displayName = 'Avatar'
 
 export default Avatar
 export { Avatar }

package/src/Avatar/props.ts

@@ -86,9 +86,11 @@ type AvatarOwnProps = {
    */
   margin?: Spacing
   /**
-   * Callback fired when the avatar image has loaded
+   * Callback fired when the avatar image has loaded.
+   * `event` can be `undefined`, if its already loaded when the page renders
+   * (can happen in SSR)
    */
-  onImageLoaded?: (event: SyntheticEvent) => void
+  onImageLoaded?: (event?: SyntheticEvent) => void
   /**
    * The element type to render as
    */