From 4d383932fadd0cfee231b437e003960c15fa0830 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Thu, 28 Sep 2023 14:41:52 -0300
Subject: [PATCH 01/13] Create loading component

---
 .../components/core_components.ex                      | 10 ++++++++++
 lib/starknet_explorer_web/live/pages/home/index.ex     |  8 ++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/lib/starknet_explorer_web/components/core_components.ex b/lib/starknet_explorer_web/components/core_components.ex
index da4b7bf4..5848bcb5 100644
--- a/lib/starknet_explorer_web/components/core_components.ex
+++ b/lib/starknet_explorer_web/components/core_components.ex
@@ -679,6 +679,7 @@ defmodule StarknetExplorerWeb.CoreComponents do
     """
   end
 
+  @spec tooltip(any) :: Phoenix.LiveView.Rendered.t()
   def tooltip(assigns) do
     ~H"""
     <img
@@ -690,4 +691,13 @@ defmodule StarknetExplorerWeb.CoreComponents do
     />
     """
   end
+
+  @spec loading_state(any) :: Phoenix.LiveView.Rendered.t()
+  def loading_state(assigns) do
+    ~H"""
+      <div id={@id} phx class="text-lg font-semibold rounded-lg bg-gray-100 text-gray-100 dark:bg-gray-700 dark:text-gray-700 w-fit mt-1">
+      ASASASASASASASAS
+      </div>
+    """
+  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 ac537278..5e6e3d2c 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -50,8 +50,12 @@ 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>
+                <%= if assigns.block_height do %>
+                  <div class="text-2xl mt-1"><%= assigns.block_height %></div>
+                <% else %>
+                  <CoreComponents.loading_state id="loading_state"/>
+                <% end %>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">

From c514c882a90be1fe18decd51822714d19d03a26c Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Thu, 28 Sep 2023 15:45:32 -0300
Subject: [PATCH 02/13] Improve component

---
 .../components/core_components.ex             | 10 ++++-
 .../live/pages/home/index.ex                  | 38 +++++++++++++++----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/lib/starknet_explorer_web/components/core_components.ex b/lib/starknet_explorer_web/components/core_components.ex
index 5848bcb5..196ecacd 100644
--- a/lib/starknet_explorer_web/components/core_components.ex
+++ b/lib/starknet_explorer_web/components/core_components.ex
@@ -695,9 +695,15 @@ defmodule StarknetExplorerWeb.CoreComponents do
   @spec loading_state(any) :: Phoenix.LiveView.Rendered.t()
   def loading_state(assigns) do
     ~H"""
-      <div id={@id} phx class="text-lg font-semibold rounded-lg bg-gray-100 text-gray-100 dark:bg-gray-700 dark:text-gray-700 w-fit mt-1">
-      ASASASASASASASAS
+    <%= if @content do  %>
+     <%= @content %>
+    <% else  %>
+      <div id={@id} class="text-lg font-semibold rounded-lg bg-gray-100 text-gray-100 dark:bg-gray-700 dark:text-gray-700 h-fit inline-block w-full">
+        <%= @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 5e6e3d2c..366956bb 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -51,11 +51,13 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <img src={~p"/images/box.svg"} class="my-auto w-6 h-auto" />
               <div>
               <div class="text-sm text-gray-400">Blocks Height</div>
-                <%= if assigns.block_height do %>
-                  <div class="text-2xl mt-1"><%= assigns.block_height %></div>
-                <% else %>
-                  <CoreComponents.loading_state id="loading_state"/>
-                <% end %>
+              <div class="text-2xl mt-1">
+                  <CoreComponents.loading_state
+                    content={assigns.block_height}
+                    mock="300000"
+                    id="loading_state"
+                  />
+                </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -70,7 +72,13 @@ 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.message_count %></div>
+                <div class="text-2xl mt-1">
+                  <CoreComponents.loading_state
+                      content={@entities_count.message_count}
+                      mock="300000"
+                      id="loading_state"
+                    />
+                </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -85,7 +93,13 @@ 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
+                        content={@entities_count.events_count}
+                        mock="300000"
+                        id="loading_state"
+                      />
+                    </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
@@ -100,7 +114,15 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <img src={~p"/images/check-square.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
+                        content={@entities_count.transaction_count}
+                        mock="10"
+                        id="loading_state"
+                      />
+                    </div>
+                </div>
               </div>
             </div>
             <div class="flex justify-between border-t border-t-gray-700 py-3 px-8">

From a787972668b179ecee6973469bd2353ee236c2ec Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Thu, 28 Sep 2023 19:37:31 -0300
Subject: [PATCH 03/13] Add components to index

---
 .../live/pages/home/index.ex                  | 130 +++++++++++++++++-
 1 file changed, 126 insertions(+), 4 deletions(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 366956bb..8305045a 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -155,7 +155,79 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div class="col-span-2">Status</div>
             <div>Age</div>
           </div>
-          <%= for block <- Enum.take(@blocks, 15) do %>
+          <%= for n <- 1..15 do %>
+          <div id={"block-#{Enum.at(@blocks,n-1).number}"} class="grid-6 custom-list-item">
+              <div>
+                <div class="list-h">Number</div>
+                <a
+                href={Utils.network_path(assigns.network, "blocks/#{Enum.at(@blocks,n-1).number}")}
+                  class="text-hover-blue"
+                >
+                  <span>
+                  <CoreComponents.loading_state
+                    content={Enum.at(@blocks,n-1).number}
+                    mock="00000"
+                    id="loading_state"
+                  />
+                  </span>
+                </a>
+              </div>
+              <div class="col-span-2">
+                <div class="list-h">Block Hash</div>
+                <div class="copy-container" id={"copy-block-#{(Enum.at(@blocks,n-1).number)}"} phx-hook="Copy">
+                  <div class="relative">
+                    <a
+                      href={Utils.network_path(assigns.network, "blocks/#{(Enum.at(@blocks,n-1).hash)}")}
+                      class="text-hover-blue"
+                    >
+                      <span>
+                      <CoreComponents.loading_state
+                    content={Utils.shorten_block_hash(Enum.at(@blocks,n-1).hash)}
+                    mock="00000"
+                    id="loading_state"
+                  />
+                      </span>
+                    </a>
+                    <div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
+                      <div class="relative">
+                        <img
+                          class="copy-btn copy-text w-4 h-4"
+                          src={~p"/images/copy.svg"}
+                          data-text={Enum.at(@blocks,n-1).hash}
+                        />
+                        <img
+                          class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
+                          src={~p"/images/check-square.svg"}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-2">
+                <div class="list-h">Status</div>
+                <div>
+                  <span class={"#{if Enum.at(@blocks,n-1).status == "ACCEPTED_ON_L2", do: "green-label"} #{if Enum.at(@blocks,n-1).status == "ACCEPTED_ON_L1", do: "blue-label"} #{if Enum.at(@blocks,n-1).status == "PENDING", do: "pink-label"}"}>
+                  <CoreComponents.loading_state
+                    content={Enum.at(@blocks,n-1).status}
+                    mock="00000"
+                    id="loading_state"
+                  />
+                  </span>
+                </div>
+              </div>
+              <div>
+                <div class="list-h">Age</div>
+                <CoreComponents.loading_state
+                    content={Utils.get_block_age(Enum.at(@blocks,n-1))}
+                    mock="0000"
+                    id="loading_state"
+                  />
+              </div>
+            </div>
+          <% end %>
+
+          <%!-- <%= for block <- Enum.take(@blocks, 15) do %>
             <div id={"block-#{block.number}"} class="grid-6 custom-list-item">
               <div>
                 <div class="list-h">Number</div>
@@ -205,7 +277,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <%= Utils.get_block_age(block) %>
               </div>
             </div>
-          <% end %>
+          <% end %> --%>
         </div>
       </div>
       <div>
@@ -228,7 +300,57 @@ 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 %>
+          <%!-- <%= for n <- 1..15 do %>
+          <div id={"transaction-#{Enum.at(Enum.with_index(@transactions), n-1).idx}"} class="grid-7 custom-list-item">
+              <div class="col-span-2">
+                <div class="list-h">Transaction Hash</div>
+                <div class="copy-container" id={"copy-transaction-#{Enum.at(Enum.with_index(@transactions), n-1).idx}"} phx-hook="Copy">
+                  <div class="relative">
+                    <a
+                      href={Utils.network_path(assigns.network, "transactions/#{Enum.at(Enum.with_index(@transactions), n-1).hash}")}
+                      class="text-hover-blue"
+                    >
+                      <span><%= Utils.shorten_block_hash(Enum.at(Enum.with_index(@transactions), n-1).hash) %></span>
+                    </a>
+                    <div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
+                      <div class="relative">
+                        <img
+                          class="copy-btn copy-text w-4 h-4"
+                          src={~p"/images/copy.svg"}
+                          data-text={Enum.at(Enum.with_index(@transactions), n-1).hash}
+                        />
+                        <img
+                          class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
+                          src={~p"/images/check-square.svg"}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-2">
+                <div class="list-h">Type</div>
+                <div>
+                  <span class={"#{if transaction.type == "INVOKE", do: "violet-label", else: "lilac-label"}"}>
+                    <%= transaction.type %>
+                  </span>
+                </div>
+              </div>
+              <div class="col-span-2">
+                <div class="list-h">Status</div>
+                <div>
+                  <span class={"#{if transaction.block_status == "ACCEPTED_ON_L2", do: "green-label"} #{if transaction.block_status == "ACCEPTED_ON_L1", do: "blue-label"} #{if transaction.block_status == "PENDING", do: "pink-label"}"}>
+                    <%= transaction.block_status %>
+                  </span>
+                </div>
+              </div>
+              <div>
+                <div class="list-h">Age</div>
+                <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
+              </div>
+            </div>
+          <% end %> --%>
+          <%!-- <%= for {transaction, idx} <- Enum.take(Enum.with_index(@transactions), 15) do %>
             <div id={"transaction-#{idx}"} class="grid-7 custom-list-item">
               <div class="col-span-2">
                 <div class="list-h">Transaction Hash</div>
@@ -277,7 +399,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
               </div>
             </div>
-          <% end %>
+          <% end %> --%>
         </div>
       </div>
     </div>

From 3cbf35be3ed71c134e8d468169a7933c96faba18 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Thu, 28 Sep 2023 19:50:02 -0300
Subject: [PATCH 04/13] rollback

---
 .../live/pages/home/index.ex                  | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 8305045a..a46d3704 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -300,24 +300,30 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div class="col-span-2">Status</div>
             <div>Age</div>
           </div>
-          <%!-- <%= for n <- 1..15 do %>
-          <div id={"transaction-#{Enum.at(Enum.with_index(@transactions), n-1).idx}"} class="grid-7 custom-list-item">
+          <%= for n <- 1..15 do %>
+          <div id={} class="grid-7 custom-list-item">
               <div class="col-span-2">
                 <div class="list-h">Transaction Hash</div>
-                <div class="copy-container" id={"copy-transaction-#{Enum.at(Enum.with_index(@transactions), n-1).idx}"} phx-hook="Copy">
+                <div class="copy-container" id={""} phx-hook="Copy">
                   <div class="relative">
                     <a
-                      href={Utils.network_path(assigns.network, "transactions/#{Enum.at(Enum.with_index(@transactions), n-1).hash}")}
+                      href={Utils.network_path(assigns.network, "transactions/#{}")}
                       class="text-hover-blue"
                     >
-                      <span><%= Utils.shorten_block_hash(Enum.at(Enum.with_index(@transactions), n-1).hash) %></span>
+                      <span>
+                      <CoreComponents.loading_state
+                        content={}
+                        mock="00000"
+                        id="loading_state"
+                      />
+                      </span>
                     </a>
                     <div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
                       <div class="relative">
                         <img
                           class="copy-btn copy-text w-4 h-4"
                           src={~p"/images/copy.svg"}
-                          data-text={Enum.at(Enum.with_index(@transactions), n-1).hash}
+                          data-text={}
                         />
                         <img
                           class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
@@ -331,25 +337,25 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <div class="col-span-2">
                 <div class="list-h">Type</div>
                 <div>
-                  <span class={"#{if transaction.type == "INVOKE", do: "violet-label", else: "lilac-label"}"}>
+                  <%!-- <span class={"#{if transaction.type == "INVOKE", do: "violet-label", else: "lilac-label"}"}>
                     <%= transaction.type %>
-                  </span>
+                  </span>--%>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Status</div>
                 <div>
-                  <span class={"#{if transaction.block_status == "ACCEPTED_ON_L2", do: "green-label"} #{if transaction.block_status == "ACCEPTED_ON_L1", do: "blue-label"} #{if transaction.block_status == "PENDING", do: "pink-label"}"}>
+                  <%!-- <span class={"#{if transaction.block_status == "ACCEPTED_ON_L2", do: "green-label"} #{if transaction.block_status == "ACCEPTED_ON_L1", do: "blue-label"} #{if transaction.block_status == "PENDING", do: "pink-label"}"}>
                     <%= transaction.block_status %>
-                  </span>
+                  </span>--%>
                 </div>
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
+                <%!-- <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %> --%>
               </div>
             </div>
-          <% end %> --%>
+          <% end %>
           <%!-- <%= for {transaction, idx} <- Enum.take(Enum.with_index(@transactions), 15) do %>
             <div id={"transaction-#{idx}"} class="grid-7 custom-list-item">
               <div class="col-span-2">

From 2b6746dc822dd51eac7d456fd72237ccb6470ed5 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 11:32:47 -0300
Subject: [PATCH 05/13] Mock transaction table

---
 .../live/pages/home/index.ex                  | 125 ++----------------
 1 file changed, 12 insertions(+), 113 deletions(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index a46d3704..278ffa80 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -226,58 +226,6 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               </div>
             </div>
           <% end %>
-
-          <%!-- <%= for block <- Enum.take(@blocks, 15) do %>
-            <div id={"block-#{block.number}"} class="grid-6 custom-list-item">
-              <div>
-                <div class="list-h">Number</div>
-                <a
-                  href={Utils.network_path(assigns.network, "blocks/#{block.number}")}
-                  class="text-hover-blue"
-                >
-                  <span><%= to_string(block.number) %></span>
-                </a>
-              </div>
-              <div class="col-span-2">
-                <div class="list-h">Block Hash</div>
-                <div class="copy-container" id={"copy-block-#{block.number}"} phx-hook="Copy">
-                  <div class="relative">
-                    <a
-                      href={Utils.network_path(assigns.network, "blocks/#{block.hash}")}
-                      class="text-hover-blue"
-                    >
-                      <span><%= Utils.shorten_block_hash(block.hash) %></span>
-                    </a>
-                    <div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
-                      <div class="relative">
-                        <img
-                          class="copy-btn copy-text w-4 h-4"
-                          src={~p"/images/copy.svg"}
-                          data-text={block.hash}
-                        />
-                        <img
-                          class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
-                          src={~p"/images/check-square.svg"}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-span-2">
-                <div class="list-h">Status</div>
-                <div>
-                  <span class={"#{if block.status == "ACCEPTED_ON_L2", do: "green-label"} #{if block.status == "ACCEPTED_ON_L1", do: "blue-label"} #{if block.status == "PENDING", do: "pink-label"}"}>
-                    <%= block.status %>
-                  </span>
-                </div>
-              </div>
-              <div>
-                <div class="list-h">Age</div>
-                <%= Utils.get_block_age(block) %>
-              </div>
-            </div>
-          <% end %> --%>
         </div>
       </div>
       <div>
@@ -301,18 +249,18 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div>Age</div>
           </div>
           <%= for n <- 1..15 do %>
-          <div id={} class="grid-7 custom-list-item">
+          <div id={"transaction-#{n}"} class="grid-7 custom-list-item">
               <div class="col-span-2">
                 <div class="list-h">Transaction Hash</div>
-                <div class="copy-container" id={""} phx-hook="Copy">
+                <div class="copy-container" id={"copy-transaction-#{n}"} phx-hook="Copy">
                   <div class="relative">
                     <a
-                      href={Utils.network_path(assigns.network, "transactions/#{}")}
+                      href={Utils.network_path(assigns.network, "transactions/#{Enum.at(@transactions,n).hash}")}
                       class="text-hover-blue"
                     >
                       <span>
                       <CoreComponents.loading_state
-                        content={}
+                        content={Utils.shorten_block_hash(Enum.at(@transactions,n).hash)}
                         mock="00000"
                         id="loading_state"
                       />
@@ -323,7 +271,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         <img
                           class="copy-btn copy-text w-4 h-4"
                           src={~p"/images/copy.svg"}
-                          data-text={}
+                          data-text={Enum.at(@transactions,n).hash}
                         />
                         <img
                           class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
@@ -337,75 +285,26 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <div class="col-span-2">
                 <div class="list-h">Type</div>
                 <div>
-                  <%!-- <span class={"#{if transaction.type == "INVOKE", do: "violet-label", else: "lilac-label"}"}>
-                    <%= transaction.type %>
-                  </span>--%>
-                </div>
-              </div>
-              <div class="col-span-2">
-                <div class="list-h">Status</div>
-                <div>
-                  <%!-- <span class={"#{if transaction.block_status == "ACCEPTED_ON_L2", do: "green-label"} #{if transaction.block_status == "ACCEPTED_ON_L1", do: "blue-label"} #{if transaction.block_status == "PENDING", do: "pink-label"}"}>
-                    <%= transaction.block_status %>
-                  </span>--%>
-                </div>
-              </div>
-              <div>
-                <div class="list-h">Age</div>
-                <%!-- <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %> --%>
-              </div>
-            </div>
-          <% end %>
-          <%!-- <%= for {transaction, idx} <- Enum.take(Enum.with_index(@transactions), 15) do %>
-            <div id={"transaction-#{idx}"} class="grid-7 custom-list-item">
-              <div class="col-span-2">
-                <div class="list-h">Transaction Hash</div>
-                <div class="copy-container" id={"copy-transaction-#{idx}"} phx-hook="Copy">
-                  <div class="relative">
-                    <a
-                      href={Utils.network_path(assigns.network, "transactions/#{transaction.hash}")}
-                      class="text-hover-blue"
-                    >
-                      <span><%= Utils.shorten_block_hash(transaction.hash) %></span>
-                    </a>
-                    <div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
-                      <div class="relative">
-                        <img
-                          class="copy-btn copy-text w-4 h-4"
-                          src={~p"/images/copy.svg"}
-                          data-text={transaction.hash}
-                        />
-                        <img
-                          class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
-                          src={~p"/images/check-square.svg"}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-span-2">
-                <div class="list-h">Type</div>
-                <div>
-                  <span class={"#{if transaction.type == "INVOKE", do: "violet-label", else: "lilac-label"}"}>
-                    <%= transaction.type %>
+                  <span class={"#{if Enum.at(@transactions,n).type == "INVOKE", do: "violet-label", else: "lilac-label"}"}>
+                    <%= Enum.at(@transactions,n).type %>
                   </span>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Status</div>
                 <div>
-                  <span class={"#{if transaction.block_status == "ACCEPTED_ON_L2", do: "green-label"} #{if transaction.block_status == "ACCEPTED_ON_L1", do: "blue-label"} #{if transaction.block_status == "PENDING", do: "pink-label"}"}>
-                    <%= transaction.block_status %>
+                  <span class={"#{if Enum.at(@transactions,n).block_status == "ACCEPTED_ON_L2", do: "green-label"} #{if Enum.at(@transactions,n).block_status == "ACCEPTED_ON_L1", do: "blue-label"} #{if Enum.at(@transactions,n).block_status == "PENDING", do: "pink-label"}"}>
+                    <%= Enum.at(@transactions,n).block_status %>
                   </span>
                 </div>
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
+                <%= Utils.get_block_age_from_timestamp(Enum.at(@transactions,n).block_timestamp) %>
               </div>
             </div>
-          <% end %> --%>
+          <% end %>
+
         </div>
       </div>
     </div>

From 96d841b87f3a9a40f891fe8587fe1f513f6621fb Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 11:42:42 -0300
Subject: [PATCH 06/13] Merge main

---
 lib/starknet_explorer_web/live/pages/home/index.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 2f2f6d55..635e8e0a 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -281,7 +281,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               </div>
               <div class="col-span-2">
                 <div class="list-h">Type</div>
-                <div class={"type #{String.downcase(transaction.type)}"}>
+                <div class={"type #{String.downcase(Enum.at(@transactions,n).type)}"}>
                   <span >
                     <%= Enum.at(@transactions,n).type %>
                   </span>

From e38ed2eb62a3ebda1b7d7c11071d3c992c29a257 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 16:37:51 -0300
Subject: [PATCH 07/13] Add loading state to index view

---
 assets/tailwind.config.js                     |   3 +
 .../components/core_components.ex             |   4 +-
 .../live/pages/home/index.ex                  | 113 +++++++++++++-----
 3 files changed, 85 insertions(+), 35 deletions(-)

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 7e0fad9a..87d046ce 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-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 196ecacd..da4408c4 100644
--- a/lib/starknet_explorer_web/components/core_components.ex
+++ b/lib/starknet_explorer_web/components/core_components.ex
@@ -695,10 +695,10 @@ defmodule StarknetExplorerWeb.CoreComponents do
   @spec loading_state(any) :: Phoenix.LiveView.Rendered.t()
   def loading_state(assigns) do
     ~H"""
-    <%= if @content do  %>
+    <%= if @condition do  %>
      <%= @content %>
     <% else  %>
-      <div id={@id} class="text-lg font-semibold rounded-lg bg-gray-100 text-gray-100 dark:bg-gray-700 dark:text-gray-700 h-fit inline-block w-full">
+      <div id={@id} 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  %>
diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 635e8e0a..f6384bd4 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -9,10 +9,17 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
   @impl true
   def mount(_params, _session, socket) do
     socket = load_blocks(socket)
+    # Process.send(self(), :load_blocks, [])
 
     {:ok, socket}
   end
 
+  # def handle_info(:load_blocks, socket) do
+  #   socket = load_blocks(socket)
+
+  #   {:noreply, socket}
+  # end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -75,6 +82,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <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"
                     id="loading_state"
@@ -96,7 +104,8 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <div class="text-sm text-gray-400">Messages</div>
                 <div class="text-2xl mt-1">
                   <CoreComponents.loading_state
-                      content={@entities_count.messages_count}
+                      condition={@entities_count}
+                      content={if @entities_count do @entities_count.messages_count end}
                       mock="300000"
                       id="loading_state"
                     />
@@ -117,7 +126,8 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <div class="text-sm text-gray-400">Events</div>
                   <div class="text-2xl mt-1">
                       <CoreComponents.loading_state
-                        content={@entities_count.events_count}
+                        condition={@entities_count}
+                        content={if @entities_count do  @entities_count.events_count end}
                         mock="300000"
                         id="loading_state"
                       />
@@ -139,7 +149,8 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <div class="text-2xl mt-1">
                 <div class="text-2xl mt-1">
                       <CoreComponents.loading_state
-                        content={@entities_count.transaction_count}
+                        condition={@entities_count}
+                        content={if @entities_count do @entities_count.transaction_count end}
                         mock="10"
                         id="loading_state"
                       />
@@ -177,16 +188,21 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             <div>Age</div>
           </div>
           <%= for n <- 1..15 do %>
-          <div id={"block-#{Enum.at(@blocks,n-1).number}"} class="grid-6 custom-list-item">
+          <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/#{Enum.at(@blocks,n-1).number}")}
-                  class="type"
+                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
-                    content={Enum.at(@blocks,n-1).number}
+                    condition={@blocks && Enum.at(@blocks,n-1)}
+                    content={if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).number end}
                     mock="00000"
                     id="loading_state"
                   />
@@ -195,30 +211,36 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               </div>
               <div class="col-span-2">
                 <div class="list-h">Block Hash</div>
-                <div class="block-data" id={"copy-block-#{(Enum.at(@blocks,n-1).number)}"} phx-hook="Copy">
+                <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/#{(Enum.at(@blocks,n-1).hash)}")}
-                      class="text-hover-link"
-                    >
+                      <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>
-                      <CoreComponents.loading_state
-                    content={Utils.shorten_block_hash(Enum.at(@blocks,n-1).hash)}
-                    mock="00000"
-                    id="loading_state"
-                  />
+                        <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"
+                          id="loading_state"
+                        />
                       </span>
                     </a>
-                    <CoreComponents.copy_button text={Enum.at(@blocks,n-1).hash} />
+                    <CoreComponents.copy_button text={
+                      if Enum.at(@blocks,n-1) do  Enum.at(@blocks,n-1).hash end} />
                   </div>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Status</div>
                 <div>
-                  <span class={"info-label #{String.downcase(Enum.at(@blocks,n-1).status)}"}>
+                  <span class={"#{if Enum.at(@blocks,n-1) do
+                  String.downcase(Enum.at(@blocks,n-1).status) <> " info-label" end}"}>
                   <CoreComponents.loading_state
-                    content={Enum.at(@blocks,n-1).status}
+                    condition={@blocks && Enum.at(@blocks,n-1)}
+                    content={if Enum.at(@blocks,n-1) do  Enum.at(@blocks,n-1).status end}
                     mock="00000"
                     id="loading_state"
                   />
@@ -228,7 +250,9 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               <div>
                 <div class="list-h">Age</div>
                 <CoreComponents.loading_state
-                    content={Utils.get_block_age(Enum.at(@blocks,n-1))}
+                  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"
                     id="loading_state"
                   />
@@ -264,40 +288,63 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <div class="block-data">
                   <div class="hash flex">
                     <a
-                      href={Utils.network_path(assigns.network, "transactions/#{Enum.at(@transactions,n).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>
                       <CoreComponents.loading_state
-                        content={Utils.shorten_block_hash(Enum.at(@transactions,n).hash)}
-                        mock="00000"
-                        id="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"
+                          id="loading_state"
+                        />
                       </span>
                     </a>
-                    <CoreComponents.copy_button text={Enum.at(@transactions,n).hash} />
+                    <CoreComponents.copy_button
+                    text={if Enum.at(@transactions,n) do Enum.at(@transactions,n).hash end} />
                   </div>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Type</div>
-                <div class={"type #{String.downcase(Enum.at(@transactions,n).type)}"}>
+                <div class={"#{if Enum.at(@transactions,n) do
+                String.downcase(Enum.at(@transactions,n).type) <> " type" end }"}>
                   <span >
-                    <%= Enum.at(@transactions,n).type %>
+                     <CoreComponents.loading_state
+                        condition={@transactions && Enum.at(@transactions,n)}
+                        content={if Enum.at(@transactions,n) do Enum.at(@transactions,n).type end}
+                        mock="00000"
+                        id="loading_state"
+                      />
+                    <%=  %>
                   </span>
                 </div>
               </div>
               <div class="col-span-2">
                 <div class="list-h">Status</div>
                 <div>
-                  <span class={"info-label #{String.downcase(Enum.at(@transactions,n).block_status)}"}>
-                  <%= Enum.at(@transactions,n).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"
+                        id="loading_state"
+                      />
                   </span>
                 </div>
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age_from_timestamp(Enum.at(@transactions,n).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"
+                        id="loading_state"
+                      />
               </div>
             </div>
           <% end %>
@@ -350,7 +397,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,

From 6868c6fb2ec6c6896e5962422cb5ac5854197375 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 16:38:26 -0300
Subject: [PATCH 08/13] Remove comment

---
 lib/starknet_explorer_web/live/pages/home/index.ex | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index f6384bd4..a3c720ee 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -9,17 +9,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
   @impl true
   def mount(_params, _session, socket) do
     socket = load_blocks(socket)
-    # Process.send(self(), :load_blocks, [])
 
     {:ok, socket}
   end
 
-  # def handle_info(:load_blocks, socket) do
-  #   socket = load_blocks(socket)
-
-  #   {:noreply, socket}
-  # end
-
   @impl true
   def render(assigns) do
     ~H"""

From d28cf4f210c4f69cbb518f702432bd7179848acb Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 17:01:15 -0300
Subject: [PATCH 09/13] Fix sizes

---
 .../components/core_components.ex              | 18 +++++++++---------
 .../live/pages/home/index.ex                   | 14 +++++++++-----
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/lib/starknet_explorer_web/components/core_components.ex b/lib/starknet_explorer_web/components/core_components.ex
index da4408c4..9b01c07b 100644
--- a/lib/starknet_explorer_web/components/core_components.ex
+++ b/lib/starknet_explorer_web/components/core_components.ex
@@ -665,17 +665,17 @@ 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
 
diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index a3c720ee..ebeaa1b9 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -211,7 +211,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         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>
+                      <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
@@ -221,8 +221,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         />
                       </span>
                     </a>
-                    <CoreComponents.copy_button text={
+                    <%= 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>
@@ -293,8 +295,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         />
                       </span>
                     </a>
-                    <CoreComponents.copy_button
-                    text={if Enum.at(@transactions,n) do Enum.at(@transactions,n).hash end} />
+                    <%= 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>
@@ -392,7 +396,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
 
        assign(socket,
           blocks: blocks,
-          transactions: transactions,
+          transactions: [],
           entities_count: entities_count,
           latest_block: latest_block,
           block_height: block_height

From ee90d74aec0ed1b28e4bce54baf76bfec81cb99c Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 17:12:23 -0300
Subject: [PATCH 10/13] Remove unused component id

---
 .../components/core_components.ex             |  2 +-
 .../live/pages/home/index.ex                  | 20 ++++++++-----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/lib/starknet_explorer_web/components/core_components.ex b/lib/starknet_explorer_web/components/core_components.ex
index 9b01c07b..720e9774 100644
--- a/lib/starknet_explorer_web/components/core_components.ex
+++ b/lib/starknet_explorer_web/components/core_components.ex
@@ -698,7 +698,7 @@ defmodule StarknetExplorerWeb.CoreComponents do
     <%= if @condition do  %>
      <%= @content %>
     <% else  %>
-      <div id={@id} 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">
+      <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  %>
diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index ebeaa1b9..29165100 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -78,7 +78,6 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                     condition={assigns}
                     content={assigns.block_height}
                     mock="300000"
-                    id="loading_state"
                   />
                 </div>
               </div>
@@ -100,7 +99,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                       condition={@entities_count}
                       content={if @entities_count do @entities_count.messages_count end}
                       mock="300000"
-                      id="loading_state"
+
                     />
                 </div>
               </div>
@@ -122,7 +121,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         condition={@entities_count}
                         content={if @entities_count do  @entities_count.events_count end}
                         mock="300000"
-                        id="loading_state"
+
                       />
                     </div>
               </div>
@@ -145,7 +144,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         condition={@entities_count}
                         content={if @entities_count do @entities_count.transaction_count end}
                         mock="10"
-                        id="loading_state"
+
                       />
                     </div>
                 </div>
@@ -197,7 +196,6 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                     condition={@blocks && Enum.at(@blocks,n-1)}
                     content={if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).number end}
                     mock="00000"
-                    id="loading_state"
                   />
                   </span>
                 </a>
@@ -217,7 +215,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                           content={if Enum.at(@blocks,n-1) do
                           Utils.shorten_block_hash(Enum.at(@blocks,n-1).hash) end}
                           mock="00000"
-                          id="loading_state"
+
                         />
                       </span>
                     </a>
@@ -237,7 +235,6 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                     condition={@blocks && Enum.at(@blocks,n-1)}
                     content={if Enum.at(@blocks,n-1) do  Enum.at(@blocks,n-1).status end}
                     mock="00000"
-                    id="loading_state"
                   />
                   </span>
                 </div>
@@ -249,7 +246,6 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                     content={if Enum.at(@blocks,n-1) do
                     Utils.get_block_age(Enum.at(@blocks,n-1)) end}
                     mock="0000"
-                    id="loading_state"
                   />
               </div>
             </div>
@@ -291,7 +287,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                           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"
-                          id="loading_state"
+
                         />
                       </span>
                     </a>
@@ -311,7 +307,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         condition={@transactions && Enum.at(@transactions,n)}
                         content={if Enum.at(@transactions,n) do Enum.at(@transactions,n).type end}
                         mock="00000"
-                        id="loading_state"
+
                       />
                     <%=  %>
                   </span>
@@ -327,7 +323,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                         content={
                           if Enum.at(@transactions,n) do Enum.at(@transactions,n).block_status end}
                         mock="0000"
-                        id="loading_state"
+
                       />
                   </span>
                 </div>
@@ -340,7 +336,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                           if Enum.at(@transactions,n) do
                           Utils.get_block_age_from_timestamp(Enum.at(@transactions,n).block_timestamp) end}
                         mock="0000"
-                        id="loading_state"
+
                       />
               </div>
             </div>

From 52b5e4a1c094736a6fe821a7fe7ee47bcfb1ae1b Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 17:14:40 -0300
Subject: [PATCH 11/13] Change pulse animation

---
 assets/tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 87d046ce..5b87048b 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
         mono: "'IBM Plex Mono', monospace",
       },
       animation: {
-        'pulseFill' : 'pulse 2s ease-out infinite'
+        'pulseFill' : 'pulse 2s ease-in-out infinite'
       },
       colors: {
         brand: "#AE2EFF",

From 28768015b78711228a09a8a930a994d74ecc6cd3 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 17:19:06 -0300
Subject: [PATCH 12/13] Restore transactions assigns

---
 lib/starknet_explorer_web/live/pages/home/index.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 29165100..036604f7 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -392,7 +392,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
 
        assign(socket,
           blocks: blocks,
-          transactions: [],
+          transactions: transactions,
           entities_count: entities_count,
           latest_block: latest_block,
           block_height: block_height

From b6984cb0f10b11c955470c7edfc348b352aec544 Mon Sep 17 00:00:00 2001
From: BertovDev <bertobautista18@gmail.com>
Date: Fri, 29 Sep 2023 17:49:30 -0300
Subject: [PATCH 13/13] Fix hash responsive

---
 lib/starknet_explorer_web/live/pages/home/index.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
index 036604f7..b489aeed 100644
--- a/lib/starknet_explorer_web/live/pages/home/index.ex
+++ b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -282,7 +282,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                       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>
+                      <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}