Show spinner when starting document capture before Acuant script loaded

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| %>

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">

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>

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>

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;

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');
+    });
+  });
+});