diff --git a/web/avatars/avatar.react.js b/web/avatars/avatar.react.js
index 8bac4add9..462978706 100644
--- a/web/avatars/avatar.react.js
+++ b/web/avatars/avatar.react.js
@@ -1,103 +1,119 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import type {
   ResolvedClientAvatar,
   AvatarSize,
 } from 'lib/types/avatar-types.js';
 
 import css from './avatar.css';
 import LoadingIndicator from '../loading-indicator.react.js';
+import EncryptedMultimedia from '../media/encrypted-multimedia.react.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
   +size: AvatarSize,
   +showSpinner?: boolean,
 };
 
 function Avatar(props: Props): React.Node {
   const { avatarInfo, size, showSpinner } = props;
 
+  let loadingIndicatorSize;
+  if (size === 'XS') {
+    loadingIndicatorSize = 'small';
+  } else if (size === 'S') {
+    loadingIndicatorSize = 'small';
+  } else if (size === 'M') {
+    loadingIndicatorSize = 'medium';
+  } else {
+    loadingIndicatorSize = 'large';
+  }
+
+  const loadingIndicator = React.useMemo(
+    () => (
+      <div className={css.editAvatarLoadingSpinner}>
+        <LoadingIndicator status="loading" size={loadingIndicatorSize} />
+      </div>
+    ),
+    [loadingIndicatorSize],
+  );
+
   const containerSizeClassName = classnames({
     [css.imgContainer]: avatarInfo.type === 'image',
     [css.xSmall]: size === 'XS',
     [css.small]: size === 'S',
     [css.medium]: size === 'M',
     [css.large]: size === 'L',
     [css.xLarge]: size === 'XL',
     [css.xxLarge]: size === 'XXL',
   });
 
   const emojiSizeClassName = classnames({
     [css.emojiContainer]: true,
     [css.emojiXSmall]: size === 'XS',
     [css.emojiSmall]: size === 'S',
     [css.emojiMedium]: size === 'M',
     [css.emojiLarge]: size === 'L',
     [css.emojiXLarge]: size === 'XL',
     [css.emojiXXLarge]: size === 'XXL',
   });
 
   const emojiContainerColorStyle = React.useMemo(() => {
     if (avatarInfo.type === 'emoji') {
       return { backgroundColor: `#${avatarInfo.color}` };
     }
     return undefined;
   }, [avatarInfo.color, avatarInfo.type]);
 
   const avatar = React.useMemo(() => {
     if (avatarInfo.type === 'image') {
       return (
         <img
           src={avatarInfo.uri}
           alt="image avatar"
           className={containerSizeClassName}
         />
       );
+    } else if (avatarInfo.type === 'encrypted_image') {
+      return (
+        <EncryptedMultimedia
+          type="encrypted_photo"
+          blobURI={avatarInfo.blobURI}
+          encryptionKey={avatarInfo.encryptionKey}
+          multimediaClassName={containerSizeClassName}
+          loadingIndicatorComponent={loadingIndicator}
+          invisibleLoad={showSpinner}
+        />
+      );
     }
 
     return (
       <div className={containerSizeClassName} style={emojiContainerColorStyle}>
         <div className={emojiSizeClassName}>{avatarInfo.emoji}</div>
       </div>
     );
   }, [
     avatarInfo.emoji,
     avatarInfo.type,
     avatarInfo.uri,
+    avatarInfo.blobURI,
+    avatarInfo.encryptionKey,
+    showSpinner,
+    loadingIndicator,
     containerSizeClassName,
     emojiContainerColorStyle,
     emojiSizeClassName,
   ]);
 
-  let loadingIndicatorSize;
-  if (size === 'XS') {
-    loadingIndicatorSize = 'small';
-  } else if (size === 'S') {
-    loadingIndicatorSize = 'small';
-  } else if (size === 'M') {
-    loadingIndicatorSize = 'medium';
-  } else {
-    loadingIndicatorSize = 'large';
-  }
-
-  const loadingIndicator = React.useMemo(
-    () => (
-      <div className={css.editAvatarLoadingSpinner}>
-        <LoadingIndicator status="loading" size={loadingIndicatorSize} />
-      </div>
-    ),
-    [loadingIndicatorSize],
-  );
-
   return (
     <div className={css.avatarContainer}>
       {showSpinner ? loadingIndicator : null}
       {avatar}
     </div>
   );
 }
 
 export default Avatar;
diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
index b4ebc4bef..2ea2dd11f 100644
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -1,135 +1,140 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import 'react-circular-progressbar/dist/styles.css';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
 
 import type { Shape } from 'lib/types/core.js';
 import type { EncryptedMediaType } from 'lib/types/media-types.js';
 
 import { decryptMedia } from './encryption-utils.js';
 import LoadableVideo from './loadable-video.react.js';
 import css from './media.css';
 import LoadingIndicator from '../loading-indicator.react.js';
 import type { CSSStyle } from '../types/styles';
 
 type Props = {
   +blobURI: string,
   +encryptionKey: string,
   +type: EncryptedMediaType,
   +thumbnailBlobURI?: ?string,
   +thumbnailEncryptionKey?: ?string,
   +placeholderSrc?: ?string,
   +multimediaClassName?: string,
   +elementStyle?: ?Shape<CSSStyle>,
+  // if provided, this component will be shown instead of the loading indicator
+  +loadingIndicatorComponent?: React.Node,
+  // if true, the loading indicator will not be shown
+  +invisibleLoad?: boolean,
 };
 
 function EncryptedMultimedia(props: Props): React.Node {
   const {
     blobURI,
     encryptionKey,
     placeholderSrc,
     elementStyle,
     multimediaClassName,
+    invisibleLoad,
   } = props;
 
   const [source, setSource] = React.useState(null);
   const videoRef = React.useRef(null);
 
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
     setSource(null);
 
     const loadDecrypted = async () => {
       const { result } = await decryptMedia(blobURI, encryptionKey);
       if (!isMounted) {
         return;
       }
 
       if (result.success) {
         const { uri } = result;
         setSource({ uri });
         uriToDispose = uri;
       } else {
         setSource({ error: result.reason });
       }
     };
 
     loadDecrypted();
 
     return () => {
       isMounted = false;
       if (uriToDispose) {
         URL.revokeObjectURL(uriToDispose);
       }
     };
   }, [blobURI, encryptionKey]);
 
   // we need to update the video source when the source changes
   // because re-rendering the <source> element wouldn't reload parent <video>
   React.useEffect(() => {
     if (videoRef.current && source?.uri) {
       videoRef.current.src = source.uri;
       videoRef.current.load();
     }
   }, [source]);
 
   let loadingIndicator, errorIndicator;
 
-  if (!source) {
-    loadingIndicator = (
+  if (!source && !invisibleLoad) {
+    loadingIndicator = props.loadingIndicatorComponent ?? (
       <LoadingIndicator
         status="loading"
         size="large"
         color="white"
         loadingClassName={css.loadingIndicator}
       />
     );
   }
 
   if (source?.error) {
     errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />;
   }
 
   let mediaNode;
   if (props.type === 'encrypted_photo') {
     mediaNode = (
       <img
         src={source?.uri ?? placeholderSrc}
         key={blobURI}
         className={multimediaClassName}
         style={elementStyle}
       />
     );
   } else {
     const { thumbnailBlobURI, thumbnailEncryptionKey } = props;
     invariant(
       thumbnailBlobURI && thumbnailEncryptionKey,
       'Thumbnail missing for encrypted video',
     );
 
     mediaNode = (
       <LoadableVideo
         uri={null}
         ref={videoRef}
         key={blobURI}
         thumbnailSource={{ thumbnailBlobURI, thumbnailEncryptionKey }}
         elementStyle={elementStyle}
         thumbHashDataURL={placeholderSrc}
         multimediaClassName={multimediaClassName}
       />
     );
   }
 
   return (
     <>
       {mediaNode}
       {loadingIndicator}
       {errorIndicator}
     </>
   );
 }
 
 export default EncryptedMultimedia;
diff --git a/web/package.json b/web/package.json
index 6ff990dc4..c0af54654 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,118 +1,118 @@
 {
   "name": "web",
   "version": "0.0.1",
   "type": "module",
   "private": true,
   "license": "BSD-3-Clause",
   "scripts": {
     "clean": "rm -rf dist/ && rm -rf node_modules/ && rm -rf database/sqlite/",
     "dev": "yarn workspace keyserver babel-build-comm-config && yarn concurrently --names=\"NODESSR,BROWSER,WORKERS\" -c \"bgBlue.bold,bgMagenta.bold,bgCyan.bold\" \"yarn webpack --config webpack.config.cjs --config-name=server --watch\" \"yarn webpack-dev-server --config webpack.config.cjs --config-name=browser\" \"yarn webpack --config webpack.config.cjs --config-name=webworkers --watch\"",
     "prod": "yarn workspace keyserver babel-build-comm-config && yarn webpack --config webpack.config.cjs --env prod --progress",
     "test": "jest",
     "build-db-wasm": "./scripts/run_emscripten.sh",
     "clean-db-wasm": "rm -rf database/_generated/ && rm -rf database/sqlite/",
     "codegen-identity-grpc": "./scripts/codegen-identity-grpc.sh"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-transform-react-constant-elements": "^7.13.13",
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-flow": "^7.13.13",
     "@babel/preset-react": "^7.13.13",
     "babel-jest": "^26.6.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "concurrently": "^5.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "flow-bin": "^0.182.0",
     "flow-typed": "^3.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "protoc-gen-js": "^3.21.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-manifest-plugin": "^5.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@commapp/olm": "0.0.10",
     "@commapp/opaque-ke-wasm": "npm:@commapp/opaque-ke-wasm@^0.0.3",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@fortawesome/fontawesome-svg-core": "1.2.25",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
     "@fortawesome/free-solid-svg-icons": "5.11.2",
     "@fortawesome/react-fontawesome": "0.1.5",
     "@matrix-org/olm": "3.2.14",
     "@rainbow-me/rainbowkit": "^1.1.1",
     "basscss": "8.0.2",
     "brotli": "^1.3.3",
     "classnames": "^2.2.5",
     "core-js": "^3.6.5",
     "dateformat": "^3.0.3",
     "detect-browser": "^4.0.4",
     "emoji-mart": "^5.5.2",
     "ethers": "^5.7.2",
     "exif-js": "^2.3.0",
     "google-protobuf": "^3.21.2",
     "grpc-web": "^1.4.2",
     "history": "^4.6.3",
     "invariant": "^2.2.4",
     "is-svg": "^4.3.0",
     "isomorphic-fetch": "^3.0.0",
     "lib": "0.0.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "qrcode.react": "^3.1.0",
     "react": "18.1.0",
     "react-circular-progressbar": "^2.0.2",
     "react-color": "^2.13.0",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "18.1.0",
     "react-feather": "^2.0.3",
     "react-icomoon": "^2.5.7",
     "react-icons": "^4.4.0",
     "react-redux": "^7.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-switch": "^7.0.0",
     "react-timeago": "^7.1.0",
     "react-virtualized-auto-sizer": "^1.0.19",
     "react-window": "^1.8.9",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.2",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^4.0.0",
     "simple-markdown": "^0.7.2",
     "siwe": "^1.1.6",
     "thumbhash": "^0.1.1",
     "tinycolor2": "^1.4.1",
     "uuid": "^3.4.0",
     "viem": "^1.15.4",
     "visibilityjs": "^2.0.2",
     "wagmi": "^1.4.3"
   },
   "jest": {
     "roots": [
       "<rootDir>"
     ],
     "transform": {
       "\\.js$": "babel-jest"
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!@babel/runtime)"
+      "/node_modules/(?!(@babel/runtime|thumbhash))"
     ],
     "moduleNameMapper": {
       "\\.(css)$": "identity-obj-proxy"
     },
     "setupFiles": [
       "<rootDir>/jest-setup.js"
     ]
   }
 }