diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 7e0fad9a..5b87048b 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
         "ibm-plex": "'IBM Plex Sans', sans-serif",
         mono: "'IBM Plex Mono', monospace",
       },
+      animation: {
+        'pulseFill' : 'pulse 2s ease-in-out infinite'
+      },
       colors: {
         brand: "#AE2EFF",
         container: "#1A1A24",
diff --git a/lib/starknet_explorer_web/components/core_components.ex b/lib/starknet_explorer_web/components/core_components.ex
index da4b7bf4..720e9774 100644
--- a/lib/starknet_explorer_web/components/core_components.ex
+++ b/lib/starknet_explorer_web/components/core_components.ex
@@ -665,20 +665,21 @@ defmodule StarknetExplorerWeb.CoreComponents do
 
   def copy_button(assigns) do
     ~H"""
-    <div class="copy-container shrink-0" id={Ecto.UUID.generate()} phx-hook="Copy">
-      <div class="relative">
-        <div class="ml-2 relative shrink-0">
-          <img class="copy-btn copy-text w-5 h-5" src="/images/copy.svg" data-text={@text} />
-          <img
-            class="copy-check absolute top-0 left-0 w-5 h-5 opacity-0 pointer-events-none"
-            src="/images/check-square.svg"
-          />
+      <div class="copy-container shrink-0" id={Ecto.UUID.generate()} phx-hook="Copy">
+        <div class="relative">
+          <div class="ml-2 relative shrink-0">
+            <img class="copy-btn copy-text w-5 h-5" src="/images/copy.svg" data-text={@text} />
+            <img
+              class="copy-check absolute top-0 left-0 w-5 h-5 opacity-0 pointer-events-none"
+              src="/images/check-square.svg"
+            />
+          </div>
         </div>
       </div>
-    </div>
     """
   end
 
+  @spec tooltip(any) :: Phoenix.LiveView.Rendered.t()
   def tooltip(assigns) do
     ~H"""
     <img
@@ -690,4 +691,19 @@ defmodule StarknetExplorerWeb.CoreComponents do
     />
     """
   end
+
+  @spec loading_state(any) :: Phoenix.LiveView.Rendered.t()
+  def loading_state(assigns) do
+    ~H"""
+    <%= if @condition do  %>
+     <%= @content %>
+    <% else  %>
+      <div class="text-md pt-1 font-semibold rounded-lg bg-gray-100 text-gray-100 dark:bg-gray-700 dark:text-gray-700 inline-block w-full animate-pulseFill">
+        <%= @mock %>
+      </div>
+    <% end  %>
+
+
+    """
+  end
 end
diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index d7da67bb..b489aeed 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -72,8 +72,14 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div class="flex items-start gap-6 my-4 mx-8">
               <img src={~p"/images/box.svg"} class="my-auto w-6 h-auto" />
               <div>
-                <div class="text-sm text-gray-400">Blocks Height</div>
-                <div class="text-2xl mt-1"><%= assigns.block_height %></div>
+              <div class="text-sm text-gray-400">Blocks Height</div>
+              <div class="text-2xl mt-1">
+                  <CoreComponents.loading_state
+                    condition={assigns}
+                    content={assigns.block_height}
+                    mock="300000"
+                  />
+                </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -88,7 +94,14 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <img src={~p"/images/message-square.svg"} class="my-auto w-6 h-auto" />
               <div>
                 <div class="text-sm text-gray-400">Messages</div>
-                <div class="text-2xl mt-1"><%= @entities_count.messages_count %></div>
+                <div class="text-2xl mt-1">
+                  <CoreComponents.loading_state
+                      condition={@entities_count}
+                      content={if @entities_count do @entities_count.messages_count end}
+                      mock="300000"
+
+                    />
+                </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -103,7 +116,14 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <img src={~p"/images/calendar.svg"} class="my-auto w-6 h-auto" />
               <div>
                 <div class="text-sm text-gray-400">Events</div>
-                <div class="text-2xl mt-1"><%= @entities_count.events_count %></div>
+                  <div class="text-2xl mt-1">
+                      <CoreComponents.loading_state
+                        condition={@entities_count}
+                        content={if @entities_count do  @entities_count.events_count end}
+                        mock="300000"
+
+                      />
+                    </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -118,7 +138,16 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <img src={~p"/images/corner-up-right.svg"} class="my-auto w-6 h-auto" />
               <div>
                 <div class="text-sm text-gray-400">Transactions</div>
-                <div class="text-2xl mt-1"><%= @entities_count.transaction_count %></div>
+                <div class="text-2xl mt-1">
+                <div class="text-2xl mt-1">
+                      <CoreComponents.loading_state
+                        condition={@entities_count}
+                        content={if @entities_count do @entities_count.transaction_count end}
+                        mock="10"
+
+                      />
+                    </div>
+                </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -150,39 +179,74 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div class="col-span-2">Status</div>
             <div>Age</div>
           </div>
-          <%= for block <- Enum.take(@blocks, 15) do %>
-            <div id={"block-#{block.number}"} class="grid-6 custom-list-item">
+          <%= for n <- 1..15 do %>
+          <div id={if Enum.at(@blocks,n-1) do
+              "block-#{Enum.at(@blocks,n-1).number}" end}
+              class="grid-6 custom-list-item">
               <div>
                 <div class="list-h">Number</div>
-                <a href={Utils.network_path(assigns.network, "blocks/#{block.number}")} class="type">
-                  <span><%= to_string(block.number) %></span>
+                <a
+                href={Utils.network_path(assigns.network, "blocks/#{
+                  if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).number end
+                }")}
+                  class={if Enum.at(@blocks,n-1) do "type" end}
+                >
+                  <span>
+                  <CoreComponents.loading_state
+                    condition={@blocks && Enum.at(@blocks,n-1)}
+                    content={if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).number end}
+                    mock="00000"
+                  />
+                  </span>
                 </a>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Block Hash</div>
-                <div class="block-data">
+                <div class="block-data" id={if Enum.at(@blocks,n-1) do
+                  "copy-block-#{(Enum.at(@blocks,n-1).number)}" end} phx-hook="Copy">
                   <div class="hash flex">
-                    <a
-                      href={Utils.network_path(assigns.network, "blocks/#{block.hash}")}
-                      class="text-hover-link"
-                    >
-                      <span><%= Utils.shorten_block_hash(block.hash) %></span>
+                      <a
+                        href={Utils.network_path(assigns.network,
+                        "blocks/#{if Enum.at(@blocks,n-1) do (Enum.at(@blocks,n-1).hash) end}")}
+                        class="text-hover-link">
+                      <span class="xl:text-sm lg:text-xs">
+                        <CoreComponents.loading_state
+                          condition={@blocks && Enum.at(@blocks,n-1)}
+                          content={if Enum.at(@blocks,n-1) do
+                          Utils.shorten_block_hash(Enum.at(@blocks,n-1).hash) end}
+                          mock="00000"
+
+                        />
+                      </span>
                     </a>
-                    <CoreComponents.copy_button text={block.hash} />
+                    <%= if Enum.at(@blocks,n-1) do %>
+                      <CoreComponents.copy_button text={
+                      if Enum.at(@blocks,n-1) do  Enum.at(@blocks,n-1).hash end} />
+                    <% end %>
                   </div>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Status</div>
                 <div>
-                  <span class={"info-label #{String.downcase(block.status)}"}>
-                    <%= block.status %>
+                  <span class={"#{if Enum.at(@blocks,n-1) do
+                  String.downcase(Enum.at(@blocks,n-1).status) <> " info-label" end}"}>
+                  <CoreComponents.loading_state
+                    condition={@blocks && Enum.at(@blocks,n-1)}
+                    content={if Enum.at(@blocks,n-1) do  Enum.at(@blocks,n-1).status end}
+                    mock="00000"
+                  />
                   </span>
                 </div>
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age(block) %>
+                <CoreComponents.loading_state
+                  condition={@blocks && Enum.at(@blocks,n-1)}
+                    content={if Enum.at(@blocks,n-1) do
+                    Utils.get_block_age(Enum.at(@blocks,n-1)) end}
+                    mock="0000"
+                  />
               </div>
             </div>
           <% end %>
@@ -208,44 +272,76 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div class="col-span-2">Status</div>
             <div>Age</div>
           </div>
-          <%= for {transaction, idx} <- Enum.take(Enum.with_index(@transactions), 15) do %>
-            <div id={"transaction-#{idx}"} class="grid-7 custom-list-item">
+          <%= for n <- 1..15 do %>
+          <div id={"transaction-#{n}"} class="grid-7 custom-list-item">
               <div class="col-span-2">
                 <div class="list-h">Transaction Hash</div>
                 <div class="block-data">
                   <div class="hash flex">
                     <a
-                      href={Utils.network_path(assigns.network, "transactions/#{transaction.hash}")}
+                      href={if @transactions && Enum.at(@transactions,n) do Utils.network_path(assigns.network, "transactions/#{Enum.at(@transactions,n).hash}") end}
                       class="text-hover-link"
                     >
-                      <span><%= Utils.shorten_block_hash(transaction.hash) %></span>
+                      <span class="xl:text-sm lg:text-xs">
+                      <CoreComponents.loading_state
+                          condition={@transactions && Enum.at(@transactions,n)}
+                          content={if Enum.at(@transactions,n) do Utils.shorten_block_hash(Enum.at(@transactions,n).hash) end}
+                          mock="00000"
+
+                        />
+                      </span>
                     </a>
-                    <CoreComponents.copy_button text={transaction.hash} />
+                    <%= if Enum.at(@transactions,n) do%>
+                      <CoreComponents.copy_button
+                      text={if Enum.at(@transactions,n) do Enum.at(@transactions,n).hash end} />
+                    <% end %>
                   </div>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Type</div>
-                <div class={"type #{String.downcase(transaction.type)}"}>
-                  <span>
-                    <%= transaction.type %>
+                <div class={"#{if Enum.at(@transactions,n) do
+                String.downcase(Enum.at(@transactions,n).type) <> " type" end }"}>
+                  <span >
+                     <CoreComponents.loading_state
+                        condition={@transactions && Enum.at(@transactions,n)}
+                        content={if Enum.at(@transactions,n) do Enum.at(@transactions,n).type end}
+                        mock="00000"
+
+                      />
+                    <%=  %>
                   </span>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Status</div>
                 <div>
-                  <span class={"info-label #{String.downcase(transaction.block_status)}"}>
-                    <%= transaction.block_status %>
+                  <span class={"#{if Enum.at(@transactions,n) do
+                    String.downcase(Enum.at(@transactions,n).block_status) <> " info-label"  end}"}>
+                      <CoreComponents.loading_state
+                        condition={@transactions && Enum.at(@transactions,n)}
+                        content={
+                          if Enum.at(@transactions,n) do Enum.at(@transactions,n).block_status end}
+                        mock="0000"
+
+                      />
                   </span>
                 </div>
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
+                <CoreComponents.loading_state
+                        condition={@transactions && Enum.at(@transactions,n)}
+                        content={
+                          if Enum.at(@transactions,n) do
+                          Utils.get_block_age_from_timestamp(Enum.at(@transactions,n).block_timestamp) end}
+                        mock="0000"
+
+                      />
               </div>
             </div>
           <% end %>
+
         </div>
       </div>
     </div>
@@ -294,7 +390,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
         {:ok, block_height} = StarknetExplorer.Rpc.get_block_height(socket.assigns.network)
         block_height = StarknetExplorer.Utils.format_number_for_display(block_height)
 
-        assign(socket,
+       assign(socket,
           blocks: blocks,
           transactions: transactions,
           entities_count: entities_count,