diff --git a/app/assets/javascripts/assets.js.erb b/app/assets/javascripts/assets.js.erb
index 17ba66110d1..265bf86200b 100644
--- a/app/assets/javascripts/assets.js.erb
+++ b/app/assets/javascripts/assets.js.erb
@@ -4,6 +4,8 @@ window.LoginGov.assets = {};
 <% keys = [
   'close-white-alt.svg',
   'id-card.svg',
+  'spinner.gif',
+  'spinner@2x.gif'
 ] %>
 
 <% keys.each do |key| %>
diff --git a/app/javascript/packages/document-capture/components/acuant-capture-canvas.jsx b/app/javascript/packages/document-capture/components/acuant-capture-canvas.jsx
index c73c8f7337f..7a4786e3791 100644
--- a/app/javascript/packages/document-capture/components/acuant-capture-canvas.jsx
+++ b/app/javascript/packages/document-capture/components/acuant-capture-canvas.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import AcuantContext from '../context/acuant';
+import useAsset from '../hooks/use-asset';
 
 /**
  * @typedef AcuantCameraUI
@@ -61,6 +62,7 @@ function AcuantCaptureCanvas({
   onImageCaptureFailure = () => {},
 }) {
   const { isReady } = useContext(AcuantContext);
+  const { getAssetPath } = useAsset();
 
   useEffect(() => {
     if (isReady) {
@@ -82,6 +84,24 @@ function AcuantCaptureCanvas({
 
   return (
     <>
+      {!isReady && (
+        <img
+          src={getAssetPath('spinner.gif')}
+          srcSet={`
+            ${getAssetPath('spinner.gif')},
+            ${getAssetPath('spinner@2x.gif')} 2x
+          `}
+          alt=""
+          width="144"
+          height="144"
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-72px, -72px)',
+          }}
+        />
+      )}
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video id="acuant-player" controls autoPlay playsInline style={{ display: 'none' }} />
       <div id="acuant-sdk-capture-view">
diff --git a/app/javascript/packages/document-capture/components/full-screen.jsx b/app/javascript/packages/document-capture/components/full-screen.jsx
index 5f15c44a43f..454bd45ad39 100644
--- a/app/javascript/packages/document-capture/components/full-screen.jsx
+++ b/app/javascript/packages/document-capture/components/full-screen.jsx
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
-import Image from './image';
 import useI18n from '../hooks/use-i18n';
+import useAsset from '../hooks/use-asset';
 
 /** @typedef {import('react').ReactNode} ReactNode */
 
@@ -25,6 +25,7 @@ let activeInstances = 0;
  */
 function FullScreen({ onRequestClose = () => {}, children }) {
   const { t } = useI18n();
+  const { getAssetPath } = useAsset();
   const modalRef = useRef(/** @type {?HTMLDivElement} */ (null));
   const trapRef = useRef(/** @type {?import('focus-trap').FocusTrap} */ (null));
   const onRequestCloseRef = useRef(onRequestClose);
@@ -64,7 +65,7 @@ function FullScreen({ onRequestClose = () => {}, children }) {
         onClick={() => trapRef.current?.deactivate()}
         className="full-screen-close-button usa-button padding-2 margin-2"
       >
-        <Image alt="" assetPath="close-white-alt.svg" className="full-screen-close-icon" />
+        <img alt="" src={getAssetPath('close-white-alt.svg')} className="full-screen-close-icon" />
       </button>
       {children}
     </div>
diff --git a/app/javascript/packages/document-capture/components/image.jsx b/app/javascript/packages/document-capture/components/image.jsx
deleted file mode 100644
index 0dfc364b1bc..00000000000
--- a/app/javascript/packages/document-capture/components/image.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useContext } from 'react';
-import AssetContext from '../context/asset';
-
-/**
- * @typedef ImageProps
- *
- * @prop {string} assetPath Asset path to resolve.
- * @prop {string} alt       Image alt attribute.
- */
-
-/**
- * @param {ImageProps & Record<string,any>} props Props object.
- */
-function Image({ assetPath, alt, ...imgProps }) {
-  const assets = useContext(AssetContext);
-
-  const src = Object.prototype.hasOwnProperty.call(assets, assetPath)
-    ? assets[assetPath]
-    : assetPath;
-
-  // Disable reason: While props spreading can introduce confusion to what is
-  // being passed down, in this case the component is intended to represent a
-  // pass-through to a base `<img />` element, with handling for asset paths.
-  //
-  // Seee: https://github.com/airbnb/javascript/tree/master/react#props
-
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return <img src={src} alt={alt} {...imgProps} />;
-}
-
-export default Image;
diff --git a/app/javascript/packages/document-capture/components/submission-interstitial.jsx b/app/javascript/packages/document-capture/components/submission-interstitial.jsx
index 53a1618b565..3463fff0ad7 100644
--- a/app/javascript/packages/document-capture/components/submission-interstitial.jsx
+++ b/app/javascript/packages/document-capture/components/submission-interstitial.jsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
-import Image from './image';
 import useI18n from '../hooks/use-i18n';
+import useAsset from '../hooks/use-asset';
 import PageHeading from './page-heading';
 
 /**
@@ -14,6 +14,7 @@ import PageHeading from './page-heading';
  */
 function SubmissionInterstitial({ autoFocus = false }) {
   const { t } = useI18n();
+  const { getAssetPath } = useAsset();
   const headingRef = useRef(/** @type {?HTMLHeadingElement} */ (null));
   useEffect(() => {
     if (autoFocus) {
@@ -23,7 +24,13 @@ function SubmissionInterstitial({ autoFocus = false }) {
 
   return (
     <div>
-      <Image assetPath="id-card.svg" alt="" width="216" height="116" className="margin-bottom-4" />
+      <img
+        src={getAssetPath('id-card.svg')}
+        alt=""
+        width="216"
+        height="116"
+        className="margin-bottom-4"
+      />
       <PageHeading ref={headingRef} tabIndex={-1}>
         {t('doc_auth.headings.interstitial')}
       </PageHeading>
diff --git a/app/javascript/packages/document-capture/hooks/use-asset.js b/app/javascript/packages/document-capture/hooks/use-asset.js
new file mode 100644
index 00000000000..196e2eadff8
--- /dev/null
+++ b/app/javascript/packages/document-capture/hooks/use-asset.js
@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import AssetContext from '../context/asset';
+
+function useAsset() {
+  const assets = useContext(AssetContext);
+
+  /**
+   * Returns the mapped URL path associated with the given asset path, or `undefined` if the mapped
+   * URL path is not known.
+   *
+   * @param {string} assetPath Asset path.
+   *
+   * @return {string|undefined} Mapped URL path, or undefined if there is no associated asset path.
+   */
+  const getAssetPath = (assetPath) =>
+    Object.prototype.hasOwnProperty.call(assets, assetPath) ? assets[assetPath] : undefined;
+
+  return { getAssetPath };
+}
+
+export default useAsset;
diff --git a/spec/javascripts/packages/document-capture/components/image-spec.jsx b/spec/javascripts/packages/document-capture/components/image-spec.jsx
deleted file mode 100644
index 3b763b66b52..00000000000
--- a/spec/javascripts/packages/document-capture/components/image-spec.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import Image from '@18f/identity-document-capture/components/image';
-import AssetContext from '@18f/identity-document-capture/context/asset';
-import render from '../../../support/render';
-
-describe('document-capture/components/image', () => {
-  it('renders the given assetPath as src if the asset is not known', () => {
-    const { getByAltText } = render(<Image assetPath="unknown.png" alt="unknown" />);
-
-    const img = getByAltText('unknown');
-
-    expect(img.getAttribute('src')).to.equal('unknown.png');
-  });
-
-  it('renders an img at mapped src if known by context', () => {
-    const { getByAltText } = render(
-      <AssetContext.Provider value={{ 'icon.png': 'icon-12345.png' }}>
-        <Image assetPath="icon.png" alt="icon" />
-      </AssetContext.Provider>,
-    );
-
-    const img = getByAltText('icon');
-
-    expect(img.getAttribute('src')).to.equal('icon-12345.png');
-  });
-
-  it('renders with given props', () => {
-    const { getByAltText } = render(<Image assetPath="icon.png" alt="icon" width={50} />);
-
-    const img = getByAltText('icon');
-
-    expect(img.width).to.equal(50);
-  });
-});
diff --git a/spec/javascripts/packages/document-capture/hooks/use-asset-spec.jsx b/spec/javascripts/packages/document-capture/hooks/use-asset-spec.jsx
new file mode 100644
index 00000000000..04aab5a5c77
--- /dev/null
+++ b/spec/javascripts/packages/document-capture/hooks/use-asset-spec.jsx
@@ -0,0 +1,36 @@
+import React, { createElement } from 'react';
+import useAsset from '@18f/identity-document-capture/hooks/use-asset';
+import AssetContext from '@18f/identity-document-capture/context/asset';
+import render from '../../../support/render';
+
+describe('document-capture/hooks/use-asset', () => {
+  describe('getAssetPath', () => {
+    it('returns undefined if the asset is not known', () => {
+      const { getByAltText } = render(
+        createElement(() => {
+          const { getAssetPath } = useAsset();
+          return <img src={getAssetPath('unknown.png')} alt="unknown" />;
+        }),
+      );
+
+      const img = getByAltText('unknown');
+
+      expect(img.hasAttribute('src')).to.be.false();
+    });
+
+    it('returns mapped src if known by context', () => {
+      const { getByAltText } = render(
+        <AssetContext.Provider value={{ 'icon.png': 'icon-12345.png' }}>
+          {createElement(() => {
+            const { getAssetPath } = useAsset();
+            return <img src={getAssetPath('icon.png')} alt="icon" />;
+          })}
+        </AssetContext.Provider>,
+      );
+
+      const img = getByAltText('icon');
+
+      expect(img.getAttribute('src')).to.equal('icon-12345.png');
+    });
+  });
+});