Add a loading spinner and pending notification to the transaction details

apps/block_scout_web/assets/css/app.scss

@@ -80,6 +80,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/address-overview";
 @import "components/token_tile_view_more";
 @import "components/dropdown";
+@import "components/loading-spinner";
 
 :export {
   primary: $primary;

apps/block_scout_web/assets/css/components/_loading-spinner.scss

@@ -0,0 +1,70 @@
+.loading-spinner {
+  margin: auto 1rem;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.loading-spinner-block-1, .loading-spinner-block-2 {
+  background-color: $light;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: $border-radius;
+
+  animation: loading-spinner 1.8s infinite ease-in-out;
+}
+
+.loading-spinner-block-2 {
+  animation-delay: -0.9s;
+}
+
+@keyframes loading-spinner {
+  25% {
+    transform: translateX(22px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(22px) translateY(22px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(22px) translateY(22px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+  }
+}
+
+
+.loading-spinner-small {
+  display: inline-block;
+  top: -0.125em;
+  margin: auto 0.5em auto 0;
+  width: 1em;
+  height: 1em;
+
+  .loading-spinner-block-1, .loading-spinner-block-2 {
+    width: 0.5em;
+    height: 0.5em;
+
+    animation: loading-spinner-small 1.8s infinite ease-in-out;
+  }
+
+  .loading-spinner-block-2 {
+    animation-delay: -0.9s;
+  }
+}
+
+@keyframes loading-spinner-small {
+  25% {
+    transform: translateX(10px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(10px) translateY(10px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(10px) translateY(10px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(10px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+  }
+}

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -12,8 +12,19 @@
               </button>
             </span>
           </div>
-          <h1 class="card-title"><%= gettext "Transaction Details" %></h1>
-          <h3 data-test="transaction_detail_hash"><%= @transaction %></h3>
+          <h1 class="card-title"><%= gettext "Transaction Details" %> </h1>
+
+          <%= if !block do %>
+            <div class="tile tile-muted d-flex justify-content-center align-items-center mb-4">
+              <div class="loading-spinner">
+                <span class="loading-spinner-block-1"></span>
+                <span class="loading-spinner-block-2"></span>
+              </div>
+              <%= gettext("This transaction is pending confirmation.") %>
+            </div>
+          <% end %>
+
+          <h3 data-test="transaction_detail_hash"><%= @transaction %> </h3>
           <span class="d-block mb-2 text-muted">
             <%= @transaction |> BlockScoutWeb.AddressView.address_partial_selector(:from, nil) |> BlockScoutWeb.AddressView.render_partial() %>
             <span class="text-muted">  &rarr; </span>
@@ -86,7 +97,9 @@
         <div class="card-body">
           <h2 class="card-title text-white"><%= gettext "Ether" %> <%= gettext "Value" %></h2>
           <div class="text-right">
-            <h3 class="text-white"> <%= value(@transaction) %></h3>
+            <h3 class="text-white">
+              <%= value(@transaction) %>
+            </h3>
             <span class="text-light" data-wei-value=<%= @transaction.value.value %> data-usd-exchange-rate=<%= @exchange_rate.usd_value %>></span>
           </div>
         </div>