diff --git a/src/components/Blockchain.vue b/src/components/Blockchain.vue
index dbf95ba..8f190e1 100644
--- a/src/components/Blockchain.vue
+++ b/src/components/Blockchain.vue
@@ -1,61 +1,114 @@
 <template>
   <div>
     <div class="blockchain-container">
-      <!-- transitions for blocks -->
-      <transition-group name="blockchain" mode="out-in" tag="ul">
-        <li
-          href="#"
-          class="flex-column align-items-start px-3 px-sm-4 blockchain-block"
-          v-for="block in blocks"
-          :key="block.height"
-        >
-          <div class="d-flex w-100 justify-content-between">
-            <div class="d-flex">
-              <div class="blockchain-block-icon">
-                <svg
-                  width="28"
-                  height="30"
-                  viewBox="0 0 28 30"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z"
-                    fill="#5351FB"
-                  />
-                  <path
-                    d="M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z"
-                    fill="#5351FB"
-                  />
-                  <path
-                    d="M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z"
-                    fill="#5351FB"
-                  />
-                </svg>
+      <div v-if="blocks.length">
+        <!-- transitions for blocks -->
+        <transition-group name="blockchain" mode="out-in" tag="ul">
+          <li
+            href="#"
+            class="flex-column align-items-start px-3 px-sm-4 blockchain-block"
+            v-for="block in blocks"
+            :key="block.height"
+          >
+            <div class="d-flex w-100 justify-content-between">
+              <div class="d-flex">
+                <div class="blockchain-block-icon">
+                  <svg
+                    width="28"
+                    height="30"
+                    viewBox="0 0 28 30"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z"
+                      fill="#5351FB"
+                    />
+                    <path
+                      d="M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z"
+                      fill="#5351FB"
+                    />
+                    <path
+                      d="M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z"
+                      fill="#5351FB"
+                    />
+                  </svg>
 
-                <div class="blockchain-block-icon-chainlink"></div>
-                <div class="blockchain-block-icon-bg"></div>
+                  <div class="blockchain-block-icon-chainlink"></div>
+                  <div class="blockchain-block-icon-bg"></div>
+                </div>
+                <div class="align-self-center">
+                  <h6 class="mb-1 font-weight-normal">Block {{ block.height.toLocaleString() }}</h6>
+                  <small class="text-muted" v-if="block.txs">
+                    {{ block.txs.toLocaleString() }} transactions
+                    <span>&bull; {{ Math.round(block.size / 1000) }} KB</span>
+                  </small>
+                </div>
               </div>
-              <div class="align-self-center">
-                <h6 class="mb-1 font-weight-normal">Block {{ block.height.toLocaleString() }}</h6>
-                <small class="text-muted" v-if="block.txs">
-                  {{ block.txs.toLocaleString() }} transactions
-                  <span>&bull; {{ Math.round(block.size / 1000) }} KB</span>
-                </small>
+              <small
+                class="text-muted align-self-center"
+                v-if="block.timestamp"
+                :title="blockReadableTime(block.timestamp)"
+              >
+                {{
+                blockTime(block.timestamp)
+                }}
+              </small>
+            </div>
+          </li>
+        </transition-group>
+      </div>
+      <div v-else>
+        <ul>
+          <li
+            href="#"
+            class="flex-column align-items-start px-3 px-sm-4 blockchain-block"
+            v-for="(fake, index) in [1,2,3]"
+            :key="index"
+          >
+            <div class="d-flex w-100 justify-content-between">
+              <div class="d-flex">
+                <div class="blockchain-block-icon blockchain-block-icon-loading">
+                  <svg
+                    width="28"
+                    height="30"
+                    viewBox="0 0 28 30"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z"
+                      fill="#D3D5DC"
+                    />
+                    <path
+                      d="M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z"
+                      fill="#D3D5DC"
+                    />
+                    <path
+                      d="M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z"
+                      fill="#D3D5DC"
+                    />
+                  </svg>
+
+                  <div class="blockchain-block-icon-chainlink"></div>
+                  <div class="blockchain-block-icon-bg"></div>
+                </div>
+                <div class="align-self-center">
+                  <span class="d-block loading-placeholder mb-1" style="width: 140px;"></span>
+                  <span
+                    class="d-block loading-placeholder loading-placeholder-sm"
+                    style="width: 80px"
+                  ></span>
+                </div>
               </div>
+              <span
+                class="loading-placeholder loading-placeholder-sm align-self-center"
+                style="width: 40px"
+              ></span>
             </div>
-            <small
-              class="text-muted align-self-center"
-              v-if="block.timestamp"
-              :title="blockReadableTime(block.timestamp)"
-            >
-              {{
-              blockTime(block.timestamp)
-              }}
-            </small>
-          </div>
-        </li>
-      </transition-group>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -219,6 +272,15 @@ export default {
     z-index: 0;
     border-radius: 100%;
   }
+  &.blockchain-block-icon-loading {
+    .blockchain-block-icon-bg {
+      background: #ffffff;
+      box-shadow: inset 0px 4px 14px rgba(0, 0, 0, 0.14);
+    }
+    .blockchain-block-icon-chainlink {
+      background: #ededf0;
+    }
+  }
 }
 
 .blockchain-block {