From 2921e048eaca12910096442dd1174c287f7dd953 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Thu, 27 Sep 2018 14:34:08 -0400
Subject: [PATCH] Add loading spinner element to the transaction status label

---
 .../assets/css/components/_loading-spinner.scss           | 4 ++--
 .../block_scout_web/templates/transaction/_tile.html.eex  | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_loading-spinner.scss b/apps/block_scout_web/assets/css/components/_loading-spinner.scss
index 4c6b8a0c53..9ea746441a 100644
--- a/apps/block_scout_web/assets/css/components/_loading-spinner.scss
+++ b/apps/block_scout_web/assets/css/components/_loading-spinner.scss
@@ -35,10 +35,10 @@
   }
 }
 
-
 .loading-spinner-small {
   display: inline-block;
-  top: -0.125em;
+  position: relative;
+  top: -0.05em;
   margin: auto 0.5em auto 0;
   width: 1em;
   height: 1em;
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tile.html.eex
index 7d7262970b..c64234d76d 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tile.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tile.html.eex
@@ -1,10 +1,16 @@
 <div class="tile tile-type-<%= type_suffix(@transaction) %> fade-in <%= status_class(@transaction) %>" data-test="<%= type_suffix(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
-  <div class="row" data-selector="token-transfers-toggle" data-test="chain_transaction">
+  <div class="row tile-body" data-selector="token-transfers-toggle" data-test="chain_transaction">
     <div class="col-md-2 d-flex flex-row flex-md-column align-items-left justify-content-start justify-content-lg-center mb-1 mb-md-0 pl-md-4">
       <span class="tile-label" data-test="transaction_type">
         <%= transaction_display_type(@transaction) %>
       </span>
       <span class="tile-status-label ml-2 ml-md-0" data-test="transaction_status">
+        <%= if status_class(@transaction) == "tile-status--pending" do %>
+          <div class="loading-spinner-small">
+            <span class="loading-spinner-block-1"></span>
+            <span class="loading-spinner-block-2"></span>
+          </div>
+        <% end %>
         <%= formatted_status(@transaction) %>
       </span>
     </div>