output step numbers

client/src/components/atoms/Spinner.module.scss

@@ -5,6 +5,7 @@
     text-align: center;
     margin-top: $spacer * $line-height;
     margin-bottom: $spacer / 2;
+    line-height: 1.3;
 
     &:before {
         content: '';
@@ -25,6 +26,7 @@
 
 .spinnerMessage {
     color: $brand-grey-light;
+    padding-top: $spacer / 4;
 }
 
 @keyframes spinner {

client/src/components/atoms/Spinner.tsx

@@ -3,7 +3,12 @@ import styles from './Spinner.module.scss'
 
 const Spinner = ({ message }: { message?: string }) => (
     <div className={styles.spinner}>
-        {message && <div className={styles.spinnerMessage}>{message}</div>}
+        {message && (
+            <div
+                className={styles.spinnerMessage}
+                dangerouslySetInnerHTML={{ __html: message }}
+            />
+        )}
     </div>
 )
 

client/src/routes/Details/AssetFile.tsx

@@ -31,13 +31,13 @@ export default class AssetFile extends PureComponent<
     private feedbackMessage = (step: number) => {
         switch (step) {
             case 0:
-                return 'Asking for agreement signature...'
+                return '1/4<br />Asking for agreement signature...'
             case 1:
-                return 'Sending agreement request...'
+                return '2/4<br />Sending agreement request...'
             case 2:
-                return 'Asking for payment confirmation...'
+                return '3/4<br />Asking for payment confirmation...'
             case 3:
-                return 'Consuming file...'
+                return '4/4<br />Consuming file...'
             default:
                 return 'Decrypting file URL...'
         }
@@ -108,9 +108,7 @@ export default class AssetFile extends PureComponent<
                 </ul>
 
                 {isLoading ? (
-                    <>
                     <Spinner message={this.feedbackMessage(step)} />
-                    </>
                 ) : (
                     <Button
                         primary