From 93ead953bdc7abf02bc41eb3166a1fe262515dff Mon Sep 17 00:00:00 2001
From: Andrea Scartabelli <andrea.scartabelli@gmail.com>
Date: Thu, 1 Aug 2024 11:46:52 +0200
Subject: [PATCH] explorer: Optimize auto re-renders of relative times

- avoid extra re-renders
- re-render only the needed bits
- add `RelativeTime` component to abstract the logic
- add option to avoid re-renders in `Rerender` when the content is the same

Resolves #2059
---
 explorer/CHANGELOG.md                         |   2 +
 .../components/__tests__/BlocksList.spec.js   |  44 +++-
 .../lib/components/__tests__/Rerender.spec.js |  18 --
 .../__tests__/TransactionsList.spec.js        |  45 +++-
 .../__snapshots__/BlockDetails.spec.js.snap   |   3 +-
 .../__snapshots__/BlocksCard.spec.js.snap     |  70 +++---
 .../__snapshots__/BlocksList.spec.js.snap     |   2 +-
 .../__snapshots__/BlocksTable.spec.js.snap    |  70 +++---
 .../TransactionDetails.spec.js.snap           |   6 +-
 .../TransactionsCard.spec.js.snap             |  70 +++---
 .../TransactionsList.spec.js.snap             |   4 +-
 .../TransactionsTable.spec.js.snap            | 210 ++++++++++--------
 .../block-details/BlockDetails.svelte         |  24 +-
 .../components/blocks-list/BlocksList.svelte  |  17 +-
 .../blocks-table/BlocksTable.svelte           |   7 +-
 explorer/src/lib/components/index.js          |   1 -
 .../LatestTransactionsCard.svelte             |   1 +
 .../lib/components/rerender/Rerender.svelte   |  15 --
 .../TransactionDetails.svelte                 |  18 +-
 .../transactions-list/TransactionsList.svelte |  28 ++-
 .../TransactionsTable.svelte                  |  12 +-
 .../components/__tests__/RelativeTime.spec.js |  94 ++++++++
 .../components/__tests__/Rerender.spec.js     | 176 +++++++++++++++
 .../__snapshots__/RelativeTime.spec.js.snap   |  33 +++
 .../RelativeTimeCustomContent.svelte          |  14 ++
 .../test-components/RerenderCounter.svelte    |  12 +
 .../RerenderGenerateValue1.svelte             |  15 ++
 .../RerenderGenerateValue2.svelte             |  16 ++
 explorer/src/lib/dusk/components/index.js     |   2 +
 .../relative-time/RelativeTime.svelte         |  31 +++
 .../dusk/components/rerender/Rerender.svelte  |  47 ++++
 .../__tests__/__snapshots__/page.spec.js.snap | 135 ++++++-----
 explorer/src/routes/blocks/block/+page.svelte |  26 +--
 .../__tests__/__snapshots__/page.spec.js.snap |  29 ++-
 .../__tests__/__snapshots__/page.spec.js.snap | 135 ++++++-----
 .../__tests__/__snapshots__/page.spec.js.snap |   3 +-
 36 files changed, 994 insertions(+), 441 deletions(-)
 delete mode 100644 explorer/src/lib/components/__tests__/Rerender.spec.js
 delete mode 100644 explorer/src/lib/components/rerender/Rerender.svelte
 create mode 100644 explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js
 create mode 100644 explorer/src/lib/dusk/components/__tests__/Rerender.spec.js
 create mode 100644 explorer/src/lib/dusk/components/__tests__/__snapshots__/RelativeTime.spec.js.snap
 create mode 100644 explorer/src/lib/dusk/components/__tests__/test-components/RelativeTimeCustomContent.svelte
 create mode 100644 explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte
 create mode 100644 explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte
 create mode 100644 explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte
 create mode 100644 explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte
 create mode 100644 explorer/src/lib/dusk/components/rerender/Rerender.svelte

diff --git a/explorer/CHANGELOG.md b/explorer/CHANGELOG.md
index 429de0df31..096ed2ed5a 100644
--- a/explorer/CHANGELOG.md
+++ b/explorer/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update Statistics Panel separator lines color [#2039]
 - Update Statistics Panel labels for clarity [#2034]
 - Update font-display to swap for custom fonts to improve performance [#2025]
+- Optimize auto re-renders of relative times [#2059]
 
 ### Fixed
 
@@ -40,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2037]: https://github.com/dusk-network/rusk/issues/2037
 [#2039]: https://github.com/dusk-network/rusk/issues/2039
 [#2056]: https://github.com/dusk-network/rusk/issues/2056
+[#2059]: https://github.com/dusk-network/rusk/issues/2059
 [#2061]: https://github.com/dusk-network/rusk/issues/2061
 
 <!-- VERSIONS -->
diff --git a/explorer/src/lib/components/__tests__/BlocksList.spec.js b/explorer/src/lib/components/__tests__/BlocksList.spec.js
index 16a9623cde..4062705614 100644
--- a/explorer/src/lib/components/__tests__/BlocksList.spec.js
+++ b/explorer/src/lib/components/__tests__/BlocksList.spec.js
@@ -1,14 +1,27 @@
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "@testing-library/svelte";
-import { BlocksList } from "..";
+import { setPathIn } from "lamb";
+
 import { gqlBlock } from "$lib/mock-data";
 import { transformBlock } from "$lib/chain-info";
 
+import { BlocksList } from "..";
+
+/** @param {HTMLElement} container */
+function getTimeElement(container) {
+  return /** @type {HTMLTimeElement} */ (container.querySelector("time"));
+}
+
 describe("Blocks List", () => {
   vi.useFakeTimers();
   vi.setSystemTime(new Date(2024, 4, 20));
 
-  const baseProps = { data: transformBlock(gqlBlock.block) };
+  const block = transformBlock(gqlBlock.block);
+
+  /** @type {import("svelte").ComponentProps<BlocksList>} */
+  const baseProps = { data: block };
+
+  const timeRefreshInterval = 1000;
 
   afterEach(cleanup);
 
@@ -21,4 +34,31 @@ describe("Blocks List", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should auto-refresh relative times when the related prop is set to true", async () => {
+    const props = {
+      ...baseProps,
+      data: setPathIn(block, "header.date", new Date()),
+    };
+    const { container, rerender } = render(BlocksList, props);
+    const timeElement = getTimeElement(container);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`);
+
+    await vi.advanceTimersByTimeAsync(timeRefreshInterval * 3);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`);
+
+    await rerender({ ...props, autoRefreshTime: true });
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"3 seconds ago"`);
+
+    await vi.advanceTimersByTimeAsync(timeRefreshInterval);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"4 seconds ago"`);
+
+    await vi.advanceTimersByTimeAsync(timeRefreshInterval);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"5 seconds ago"`);
+  });
 });
diff --git a/explorer/src/lib/components/__tests__/Rerender.spec.js b/explorer/src/lib/components/__tests__/Rerender.spec.js
deleted file mode 100644
index 9865f82fbc..0000000000
--- a/explorer/src/lib/components/__tests__/Rerender.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { cleanup } from "@testing-library/svelte";
-import { Rerender } from "..";
-
-import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
-
-describe("updates the slot content every second", () => {
-  const baseOptions = {
-    target: document.body,
-  };
-
-  afterEach(cleanup);
-  it("should render with slot data", () => {
-    const renderWithSlots = renderWithSimpleContent(Rerender, baseOptions);
-
-    expect(renderWithSlots.container.firstChild).toMatchSnapshot();
-  });
-});
diff --git a/explorer/src/lib/components/__tests__/TransactionsList.spec.js b/explorer/src/lib/components/__tests__/TransactionsList.spec.js
index 0317405d2b..aaa2bc50fa 100644
--- a/explorer/src/lib/components/__tests__/TransactionsList.spec.js
+++ b/explorer/src/lib/components/__tests__/TransactionsList.spec.js
@@ -1,19 +1,30 @@
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "@testing-library/svelte";
-import { TransactionsList } from "..";
+
 import { gqlTransaction } from "$lib/mock-data";
 import { transformTransaction } from "$lib/chain-info";
 
+import { TransactionsList } from "..";
+
+/** @param {HTMLElement} container */
+function getTimeElement(container) {
+  return /** @type {HTMLTimeElement} */ (container.querySelector("time"));
+}
+
 describe("Transactions List", () => {
   vi.useFakeTimers();
   vi.setSystemTime(new Date(2024, 4, 20));
 
+  const transaction = transformTransaction(gqlTransaction.tx);
+
   /** @type {import("svelte").ComponentProps<TransactionsList>} */
   const baseProps = {
-    data: transformTransaction(gqlTransaction.tx),
+    data: transaction,
     mode: "full",
   };
 
+  const timeRefreshInterval = 1000;
+
   afterEach(cleanup);
 
   afterAll(() => {
@@ -36,4 +47,34 @@ describe("Transactions List", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should auto-refresh relative times when the related prop is set to true", async () => {
+    const props = {
+      ...baseProps,
+      data: {
+        ...transaction,
+        date: new Date(),
+      },
+    };
+    const { container, rerender } = render(TransactionsList, props);
+    const timeElement = getTimeElement(container);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`);
+
+    await vi.advanceTimersByTimeAsync(timeRefreshInterval * 3);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`);
+
+    await rerender({ ...props, autoRefreshTime: true });
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"3 seconds ago"`);
+
+    await vi.advanceTimersByTimeAsync(timeRefreshInterval);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"4 seconds ago"`);
+
+    await vi.advanceTimersByTimeAsync(timeRefreshInterval);
+
+    expect(timeElement.innerHTML).toMatchInlineSnapshot(`"5 seconds ago"`);
+  });
 });
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
index 20115baa53..7d87b93a24 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -140,13 +140,12 @@ exports[`Block Details > renders the Block Details component 1`] = `
         class="details-list__definition"
       >
         <time
-          class="block-details__list-timestamp"
+          class="dusk-relative-time block-details__list-timestamp"
           datetime="2024-04-16T20:07:02.000Z"
           slot="definition"
         >
           Tue, 16 Apr 2024 20:07:02 GMT (last month)
           
-           
         </time>
       </dd>
       <dt
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
index df4f9f7f4e..a25bbcbca8 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
@@ -89,11 +89,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,454
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:54.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -148,11 +149,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,453
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:51.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -207,11 +209,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,452
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:47.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -266,11 +269,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,451
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:45.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -325,11 +329,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,450
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:42.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -384,11 +389,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,449
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:39.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -443,11 +449,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,448
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:35.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -502,11 +509,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,447
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:32.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -561,11 +569,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,446
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:29.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
@@ -620,11 +629,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
                 1,365,445
               </a>
                
-              <small
-                class="block__time"
+              <time
+                class="dusk-relative-time block__time"
+                datetime="2024-05-28T14:26:24.000Z"
               >
                 yesterday
-              </small>
+              </time>
             </td>
             
              
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
index a395af1b15..946786bef6 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
@@ -33,7 +33,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
     class="details-list__definition details-list__definition--table"
   >
     <time
-      class="block-details__list-timestamp"
+      class="dusk-relative-time block-details__list-timestamp"
       datetime="2024-04-16T20:07:02.000Z"
       slot="definition"
     >
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
index 17b4ddc24f..842602928a 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
@@ -60,11 +60,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,454
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:54.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -119,11 +120,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,453
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:51.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -178,11 +180,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,452
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:47.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -237,11 +240,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,451
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:45.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -296,11 +300,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,450
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:42.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -355,11 +360,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,449
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:39.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -414,11 +420,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,448
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:35.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -473,11 +480,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,447
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:32.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -532,11 +540,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,446
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:29.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
@@ -591,11 +600,12 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
             1,365,445
           </a>
            
-          <small
-            class="block__time"
+          <time
+            class="dusk-relative-time block__time"
+            datetime="2024-05-28T14:26:24.000Z"
           >
             yesterday
-          </small>
+          </time>
         </td>
         
          
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
index 165193dc40..555e7c29db 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
@@ -134,13 +134,12 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
         class="details-list__definition"
       >
         <time
-          class="transaction-details__list-timestamp"
+          class="dusk-relative-time transaction-details__list-timestamp"
           datetime="2024-04-16T06:39:09.000Z"
           slot="definition"
         >
           Tue, 16 Apr 2024 06:39:09 GMT (last month)
           
-           
         </time>
       </dd>
       <dt
@@ -461,13 +460,12 @@ exports[`Transaction Details > renders the Transaction Details component with th
         class="details-list__definition"
       >
         <time
-          class="transaction-details__list-timestamp"
+          class="dusk-relative-time transaction-details__list-timestamp"
           datetime="2024-04-16T06:39:09.000Z"
           slot="definition"
         >
           Tue, 16 Apr 2024 06:39:09 GMT (last month)
           
-           
         </time>
       </dd>
       <dt
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
index 711dfea952..0a090903f5 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
@@ -137,11 +137,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 070280c695...94efca2a0e
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:42:20.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -211,11 +212,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 534f753d5a...5153259c00
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:42:08.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -285,11 +287,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 c6f13af20c...fc68ebb102
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:41:58.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -359,11 +362,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 31c7dce26a...bf7bcb4c04
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:40:57.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -433,11 +437,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 4fa6e913c0...9e4dd5510d
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:40:28.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -507,11 +512,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 d1a7928a43...79ccdb2e04
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:39:59.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -581,11 +587,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 004ca8683c...cff9718b06
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:39:13.000Z"
               >
                 18 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -655,11 +662,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 b5a77063e4...4496253a05
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:01:59.000Z"
               >
                 19 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -729,11 +737,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 b263d9d594...9d80b06e0b
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:01:15.000Z"
               >
                 19 hours ago
-              </small>
+              </time>
             </td>
             
              
@@ -803,11 +812,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
                 b4525cb82f...f5275d7709
               </a>
                
-              <small
-                class="transaction__time"
+              <time
+                class="dusk-relative-time transaction__time"
+                datetime="2024-05-29T05:00:40.000Z"
               >
                 19 hours ago
-              </small>
+              </time>
             </td>
             
              
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
index f22446ceb2..22ca90c48f 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
@@ -33,7 +33,7 @@ exports[`Transactions List > should render the \`TransactionsList\` component in
     class="details-list__definition details-list__definition--table"
   >
     <time
-      class="transaction-details__list-timestamp"
+      class="dusk-relative-time transaction-details__list-timestamp"
       datetime="2024-04-16T06:39:09.000Z"
       slot="definition"
     >
@@ -127,7 +127,7 @@ exports[`Transactions List > should render the \`TransactionsList\` component in
     class="details-list__definition details-list__definition--table"
   >
     <time
-      class="transaction-details__list-timestamp"
+      class="dusk-relative-time transaction-details__list-timestamp"
       datetime="2024-04-16T06:39:09.000Z"
       slot="definition"
     >
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap
index 7149cb6f65..82fbb1eb72 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap
@@ -67,11 +67,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             070280c695...94efca2a0e
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:42:20.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -141,11 +142,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             534f753d5a...5153259c00
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:42:08.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -215,11 +217,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             c6f13af20c...fc68ebb102
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:41:58.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -289,11 +292,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             31c7dce26a...bf7bcb4c04
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:40:57.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -363,11 +367,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             4fa6e913c0...9e4dd5510d
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:40:28.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -437,11 +442,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             d1a7928a43...79ccdb2e04
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:39:59.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -511,11 +517,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             004ca8683c...cff9718b06
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:39:13.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -585,11 +592,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             b5a77063e4...4496253a05
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:01:59.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -659,11 +667,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             b263d9d594...9d80b06e0b
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:01:15.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -733,11 +742,12 @@ exports[`Transactions Table > should pass additional class names to the rendered
             b4525cb82f...f5275d7709
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:00:40.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -860,11 +870,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             070280c695...94efca2a0e
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:42:20.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -913,11 +924,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             534f753d5a...5153259c00
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:42:08.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -966,11 +978,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             c6f13af20c...fc68ebb102
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:41:58.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1019,11 +1032,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             31c7dce26a...bf7bcb4c04
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:40:57.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1072,11 +1086,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             4fa6e913c0...9e4dd5510d
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:40:28.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1125,11 +1140,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             d1a7928a43...79ccdb2e04
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:39:59.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1178,11 +1194,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             004ca8683c...cff9718b06
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:39:13.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1231,11 +1248,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             b5a77063e4...4496253a05
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:01:59.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1284,11 +1302,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             b263d9d594...9d80b06e0b
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:01:15.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1337,11 +1356,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             b4525cb82f...f5275d7709
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:00:40.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1449,11 +1469,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             070280c695...94efca2a0e
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:42:20.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1523,11 +1544,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             534f753d5a...5153259c00
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:42:08.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1597,11 +1619,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             c6f13af20c...fc68ebb102
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:41:58.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1671,11 +1694,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             31c7dce26a...bf7bcb4c04
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:40:57.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1745,11 +1769,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             4fa6e913c0...9e4dd5510d
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:40:28.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1819,11 +1844,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             d1a7928a43...79ccdb2e04
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:39:59.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1893,11 +1919,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             004ca8683c...cff9718b06
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:39:13.000Z"
           >
             18 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -1967,11 +1994,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             b5a77063e4...4496253a05
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:01:59.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -2041,11 +2069,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             b263d9d594...9d80b06e0b
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:01:15.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
@@ -2115,11 +2144,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
             b4525cb82f...f5275d7709
           </a>
            
-          <small
-            class="transaction__time"
+          <time
+            class="dusk-relative-time transaction__time"
+            datetime="2024-05-29T05:00:40.000Z"
           >
             19 hours ago
-          </small>
+          </time>
         </td>
         
          
diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
index 66829b6be8..b1b99b0632 100644
--- a/explorer/src/lib/components/block-details/BlockDetails.svelte
+++ b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -2,18 +2,12 @@
 
 <script>
   import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-  import {
-    AppAnchorButton,
-    DataCard,
-    ListItem,
-    Rerender,
-  } from "$lib/components";
-  import { ProgressBar } from "$lib/dusk/components";
+  import { AppAnchorButton, DataCard, ListItem } from "$lib/components";
+  import { ProgressBar, RelativeTime } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
     calculateAdaptiveCharCount,
-    getRelativeTimeString,
     makeClassName,
     middleEllipsis,
   } from "$lib/dusk/string";
@@ -97,15 +91,15 @@
     <!-- TIMESTAMP -->
     <ListItem tooltipText="The date and time the block was created">
       <svelte:fragment slot="term">timestamp</svelte:fragment>
-      <time
-        datetime={data.header.date.toISOString()}
-        class="block-details__list-timestamp"
+      <RelativeTime
+        autoRefresh={true}
+        className="block-details__list-timestamp"
+        date={data.header.date}
         slot="definition"
+        ><svelte:fragment let:relativeTime
+          >{`${data.header.date.toUTCString()} (${relativeTime})`}</svelte:fragment
+        ></RelativeTime
       >
-        <Rerender>
-          {`${data.header.date.toUTCString()} (${getRelativeTimeString(data.header.date, "long")})`}
-        </Rerender>
-      </time>
     </ListItem>
 
     <!-- TRANSACTIONS -->
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.svelte b/explorer/src/lib/components/blocks-list/BlocksList.svelte
index fb6aef4345..e492d8c624 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.svelte
+++ b/explorer/src/lib/components/blocks-list/BlocksList.svelte
@@ -2,12 +2,14 @@
 
 <script>
   import { AppAnchor, DetailList, ListItem } from "$lib/components";
-  import { ProgressBar } from "$lib/dusk/components";
+  import { ProgressBar, RelativeTime } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
-  import { getRelativeTimeString } from "$lib/dusk/string";
   import { luxToDusk } from "$lib/dusk/currency";
   import "./BlocksList.css";
 
+  /** @type {boolean} */
+  export let autoRefreshTime = false;
+
   /** @type {Block} */
   export let data;
 
@@ -41,13 +43,12 @@
       : ""}
   >
     <svelte:fragment slot="term">relative time</svelte:fragment>
-    <time
-      datetime={data.header.date.toISOString()}
-      class="block-details__list-timestamp"
+    <RelativeTime
+      autoRefresh={autoRefreshTime}
+      className="block-details__list-timestamp"
+      date={data.header.date}
       slot="definition"
-    >
-      {getRelativeTimeString(data.header.date, "long")}
-    </time>
+    />
   </ListItem>
 
   <!-- AVERAGE FEE PAID -->
diff --git a/explorer/src/lib/components/blocks-table/BlocksTable.svelte b/explorer/src/lib/components/blocks-table/BlocksTable.svelte
index a8e1e36561..46c03df996 100644
--- a/explorer/src/lib/components/blocks-table/BlocksTable.svelte
+++ b/explorer/src/lib/components/blocks-table/BlocksTable.svelte
@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
+  import { RelativeTime } from "$lib/dusk/components";
   import { AppAnchor } from "$lib/components";
   import {
     Table,
@@ -10,7 +11,7 @@
     TableRow,
   } from "$lib/components/table";
   import { luxToDusk } from "$lib/dusk/currency";
-  import { getRelativeTimeString, makeClassName } from "$lib/dusk/string";
+  import { makeClassName } from "$lib/dusk/string";
   import { createValueFormatter } from "$lib/dusk/value";
 
   import "./BlocksTable.css";
@@ -44,9 +45,7 @@
             href={`/blocks/block?id=${block.header.hash}`}
             >{numberFormatter(block.header.height)}</AppAnchor
           >
-          <small class="block__time"
-            >{getRelativeTimeString(block.header.date, "long")}</small
-          >
+          <RelativeTime className="block__time" date={block.header.date} />
         </TableCell>
         <TableCell>
           <b class="block__fee-avg-label">AVG:</b>
diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index 1be20b9b04..86e43cbe63 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -15,7 +15,6 @@ export { default as LatestBlocksCard } from "./latest-blocks-card/LatestBlocksCa
 export { default as LatestTransactionsCard } from "./latest-transactions-card/LatestTransactionsCard.svelte";
 export { default as ListItem } from "./list-item/ListItem.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
-export { default as Rerender } from "./rerender/Rerender.svelte";
 export { default as SearchNotification } from "./search-notification/SearchNotification.svelte";
 export { default as StaleDataNotice } from "./stale-data-notice/StaleDataNotice.svelte";
 export { default as TextboxAndButton } from "./textbox-and-button/TextboxAndButton.svelte";
diff --git a/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte
index 108b7c4ca1..d0e43bef8c 100644
--- a/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte
+++ b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte
@@ -51,6 +51,7 @@
   {#if isSmallScreen}
     {#each txns as txn (txn)}
       <TransactionsList
+        autoRefreshTime={!isOnHomeScreen}
         data={txn}
         mode={isOnHomeScreen ? "compact" : "full"}
         {displayTooltips}
diff --git a/explorer/src/lib/components/rerender/Rerender.svelte b/explorer/src/lib/components/rerender/Rerender.svelte
deleted file mode 100644
index a9ce0ffd70..0000000000
--- a/explorer/src/lib/components/rerender/Rerender.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  /* eslint-disable svelte/infinite-reactive-loop */
-
-  /** @type {Number} */
-  export let interval = 1000;
-
-  let updateFlag = 0;
-  $: setTimeout(() => {
-    updateFlag ^= 1;
-  }, interval);
-</script>
-
-{#key updateFlag}
-  <slot />
-{/key}
diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
index 3c7c0c02b8..fe23cd19a3 100644
--- a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
+++ b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
@@ -6,10 +6,9 @@
     DataCard,
     DataGuard,
     ListItem,
-    Rerender,
     StaleDataNotice,
   } from "$lib/components";
-  import { Badge, Card, Switch } from "$lib/dusk/components";
+  import { Badge, Card, RelativeTime, Switch } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
     createCurrencyFormatter,
@@ -18,7 +17,6 @@
   } from "$lib/dusk/currency";
   import {
     calculateAdaptiveCharCount,
-    getRelativeTimeString,
     makeClassName,
     middleEllipsis,
   } from "$lib/dusk/string";
@@ -115,15 +113,15 @@
     <!-- TIMESTAMP -->
     <ListItem tooltipText="The date and time the transaction was created">
       <svelte:fragment slot="term">timestamp</svelte:fragment>
-      <time
-        datetime={data.date.toISOString()}
-        class="transaction-details__list-timestamp"
+      <RelativeTime
+        autoRefresh={true}
+        className="transaction-details__list-timestamp"
+        date={data.date}
         slot="definition"
+        ><svelte:fragment let:relativeTime
+          >{`${data.date.toUTCString()} (${relativeTime})`}</svelte:fragment
+        ></RelativeTime
       >
-        <Rerender>
-          {`${data.date.toUTCString()} (${getRelativeTimeString(data.date, "long")})`}
-        </Rerender>
-      </time>
     </ListItem>
 
     <!-- TYPE -->
diff --git a/explorer/src/lib/components/transactions-list/TransactionsList.svelte b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
index b2e3b88359..6ec8525a1a 100644
--- a/explorer/src/lib/components/transactions-list/TransactionsList.svelte
+++ b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
@@ -3,26 +3,25 @@
 <script>
   import { AppAnchor, DataGuard, DetailList, ListItem } from "$lib/components";
   import { createValueFormatter } from "$lib/dusk/value";
-  import {
-    calculateAdaptiveCharCount,
-    getRelativeTimeString,
-    middleEllipsis,
-  } from "$lib/dusk/string";
-  import { Badge } from "$lib/dusk/components";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { Badge, RelativeTime } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { onMount } from "svelte";
 
   import "./TransactionsList.css";
 
+  /** @type {boolean} */
+  export let autoRefreshTime = false;
+
   /** @type {Transaction}*/
   export let data;
 
-  /** @type {"compact" | "full"} */
-  export let mode;
-
   /** @type {Boolean} */
   export let displayTooltips = false;
 
+  /** @type {"compact" | "full"} */
+  export let mode;
+
   /** @type {number} */
   let screenWidth = window.innerWidth;
 
@@ -64,13 +63,12 @@
       : ""}
   >
     <svelte:fragment slot="term">relative time</svelte:fragment>
-    <time
-      datetime={data.date.toISOString()}
-      class="transaction-details__list-timestamp"
+    <RelativeTime
+      autoRefresh={autoRefreshTime}
+      date={data.date}
+      className="transaction-details__list-timestamp"
       slot="definition"
-    >
-      {getRelativeTimeString(data.date, "long")}
-    </time>
+    />
   </ListItem>
 
   {#if mode === "full"}
diff --git a/explorer/src/lib/components/transactions-table/TransactionsTable.svelte b/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
index 40c7bbe38c..1c30f8f7fa 100644
--- a/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
+++ b/explorer/src/lib/components/transactions-table/TransactionsTable.svelte
@@ -9,14 +9,10 @@
     TableRow,
   } from "$lib/components/table";
   import { AppAnchor } from "$lib/components";
-  import { Badge } from "$lib/dusk/components";
+  import { Badge, RelativeTime } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { createValueFormatter } from "$lib/dusk/value";
-  import {
-    getRelativeTimeString,
-    makeClassName,
-    middleEllipsis,
-  } from "$lib/dusk/string";
+  import { makeClassName, middleEllipsis } from "$lib/dusk/string";
   import "./TransactionsTable.css";
 
   /** @type {string | Undefined} */
@@ -56,9 +52,7 @@
             href={`/transactions/transaction?id=${transaction.txid}`}
             >{middleEllipsis(transaction.txid, HASH_CHARS_LENGTH)}</AppAnchor
           >
-          <small class="transaction__time"
-            >{getRelativeTimeString(transaction.date, "long")}</small
-          >
+          <RelativeTime className="transaction__time" date={transaction.date} />
         </TableCell>
         {#if mode === "full"}
           <TableCell>
diff --git a/explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js b/explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js
new file mode 100644
index 0000000000..798cfbc984
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/RelativeTime.spec.js
@@ -0,0 +1,94 @@
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+
+import RelativeTimeCustomContent from "./test-components/RelativeTimeCustomContent.svelte";
+
+import { RelativeTime } from "..";
+
+describe("RelativeTime", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20, 15, 25, 30));
+
+  const baseProps = {
+    date: new Date(2024, 4, 20, 15, 25, 10),
+  };
+
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render the relative time of the given date and should not updated it by default", async () => {
+    const { container } = render(RelativeTime, baseOptions);
+    const textContent = container.firstChild?.textContent;
+
+    expect(container.firstChild).toMatchSnapshot();
+    expect(textContent).toMatchInlineSnapshot(`"20 seconds ago"`);
+
+    await vi.advanceTimersByTimeAsync(10000);
+
+    expect(container.firstChild?.textContent).toBe(textContent);
+  });
+
+  it("should pass additional class names and attributes to the rendered element", () => {
+    const props = {
+      ...baseProps,
+      className: "foo bar",
+      "data-baz": "baz",
+    };
+    const { container } = render(RelativeTime, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should update the relative time every second if the `autoRefresh` property is set to `true`", async () => {
+    const props = { ...baseProps, autoRefresh: true };
+    const { container } = render(RelativeTime, { ...baseOptions, props });
+
+    expect(container.firstChild?.textContent).toMatchInlineSnapshot(
+      `"30 seconds ago"`
+    );
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.firstChild?.textContent).toMatchInlineSnapshot(
+      `"31 seconds ago"`
+    );
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.firstChild?.textContent).toMatchInlineSnapshot(
+      `"32 seconds ago"`
+    );
+  });
+
+  it("should allow to put custom content in the default slot", async () => {
+    const { container } = render(RelativeTimeCustomContent, {
+      ...baseOptions,
+      props: { date: baseProps.date },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+    expect(container.firstChild?.textContent).toMatchInlineSnapshot(
+      `"The relative time now is 32 seconds ago"`
+    );
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.firstChild?.textContent).toMatchInlineSnapshot(
+      `"The relative time now is 33 seconds ago"`
+    );
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.firstChild?.textContent).toMatchInlineSnapshot(
+      `"The relative time now is 34 seconds ago"`
+    );
+  });
+});
diff --git a/explorer/src/lib/dusk/components/__tests__/Rerender.spec.js b/explorer/src/lib/dusk/components/__tests__/Rerender.spec.js
new file mode 100644
index 0000000000..e6bae9a2b2
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/Rerender.spec.js
@@ -0,0 +1,176 @@
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+
+import RerenderCounter from "./test-components/RerenderCounter.svelte";
+import RerenderGenerateValue1 from "./test-components/RerenderGenerateValue1.svelte";
+import RerenderGenerateValue2 from "./test-components/RerenderGenerateValue2.svelte";
+
+describe("renderWithSimpleContent", () => {
+  vi.useFakeTimers();
+
+  let domMutations = 0;
+
+  const incrementMutations = () => domMutations++;
+  const mutationObserver = new MutationObserver(incrementMutations);
+
+  /**
+   * @param {Parameters<render>[0]} component
+   * @param {Parameters<render>[1]} options
+   */
+  const renderAndObserveContainer = (component, options) => {
+    const renderResult = render(component, options);
+
+    mutationObserver.observe(renderResult.container, {
+      childList: true,
+      subtree: true,
+    });
+
+    return renderResult;
+  };
+
+  const baseOptions = {
+    target: document.body,
+  };
+
+  afterEach(() => {
+    mutationObserver.disconnect();
+    domMutations = 0;
+    cleanup();
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render its content and re-render it every second by default", async () => {
+    const { container } = renderAndObserveContainer(
+      RerenderCounter,
+      baseOptions
+    );
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"0"`);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"1"`);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"2"`);
+
+    expect(domMutations).toBe(2);
+  });
+
+  it("should accept a custom interval for re-renders", async () => {
+    const props = { interval: 2000 };
+    const { container } = renderAndObserveContainer(RerenderCounter, {
+      ...baseOptions,
+      props,
+    });
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"0"`);
+
+    await vi.advanceTimersByTimeAsync(props.interval / 2);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"0"`);
+
+    await vi.advanceTimersByTimeAsync(props.interval / 2);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"1"`);
+
+    await vi.advanceTimersByTimeAsync(props.interval / 2);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"1"`);
+
+    await vi.advanceTimersByTimeAsync(props.interval / 2);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(`"2"`);
+    expect(domMutations).toBe(2);
+  });
+
+  it("should accept a custom `generateValue` function and use its result both as re-render key and as the default slot content", async () => {
+    const values = [1, 2];
+    const { container } = renderAndObserveContainer(RerenderGenerateValue1, {
+      ...baseOptions,
+      props: { values },
+    });
+
+    expect(container.innerHTML).toBe("1");
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("2");
+    expect(domMutations).toBe(1);
+  });
+
+  it("should not trigger a re-render if the generated value is equal to the previous one by the `SameValueZero` comparison", async () => {
+    const values = [1, 2, 0, -0, NaN, NaN, 3, 3, 4];
+    const { container } = renderAndObserveContainer(RerenderGenerateValue1, {
+      ...baseOptions,
+      props: { values },
+    });
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("2");
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("0");
+    expect(domMutations).toBe(2);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("0");
+    expect(domMutations).toBe(2);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("NaN");
+    expect(domMutations).toBe(3);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("NaN");
+    expect(domMutations).toBe(3);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("3");
+    expect(domMutations).toBe(4);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("3");
+    expect(domMutations).toBe(4);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toBe("4");
+    expect(domMutations).toBe(5);
+  });
+
+  it("should expose the custom generated value and let it be used as part of custom content", async () => {
+    const { container } = renderAndObserveContainer(
+      RerenderGenerateValue2,
+      baseOptions
+    );
+
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<span>now the value is: 0</span>"`
+    );
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<span>now the value is: 1</span>"`
+    );
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<span>now the value is: 2</span>"`
+    );
+    expect(domMutations).toBe(2);
+  });
+});
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/RelativeTime.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/RelativeTime.spec.js.snap
new file mode 100644
index 0000000000..a66d8664b7
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/__snapshots__/RelativeTime.spec.js.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RelativeTime > should allow to put custom content in the default slot 1`] = `
+<time
+  class="dusk-relative-time"
+  datetime="2024-05-20T15:25:10.000Z"
+>
+  <span>
+    The relative time now is 
+    32 seconds ago
+  </span>
+  
+</time>
+`;
+
+exports[`RelativeTime > should pass additional class names and attributes to the rendered element 1`] = `
+<time
+  class="dusk-relative-time foo bar"
+  data-baz="baz"
+  datetime="2024-05-20T15:25:10.000Z"
+>
+  30 seconds ago
+</time>
+`;
+
+exports[`RelativeTime > should render the relative time of the given date and should not updated it by default 1`] = `
+<time
+  class="dusk-relative-time"
+  datetime="2024-05-20T15:25:10.000Z"
+>
+  20 seconds ago
+</time>
+`;
diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RelativeTimeCustomContent.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RelativeTimeCustomContent.svelte
new file mode 100644
index 0000000000..654d60b19b
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/test-components/RelativeTimeCustomContent.svelte
@@ -0,0 +1,14 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { RelativeTime } from "../..";
+
+  /** @type {Date} */
+  export let date;
+</script>
+
+<RelativeTime autoRefresh={true} {date}>
+  <svelte:fragment let:relativeTime>
+    <span>The relative time now is {relativeTime}</span>
+  </svelte:fragment>
+</RelativeTime>
diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte
new file mode 100644
index 0000000000..c608d52571
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte
@@ -0,0 +1,12 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Rerender } from "../..";
+
+  /** @type {number | undefined} */
+  export let interval = undefined;
+
+  let counter = 0;
+</script>
+
+<Rerender {interval}>{counter++}</Rerender>
diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte
new file mode 100644
index 0000000000..68a5b33777
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte
@@ -0,0 +1,15 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Rerender } from "../..";
+
+  /** @type {Array<any>} */
+  export let values;
+
+  let index = 0;
+
+  /** @type {() => number}*/
+  const generateValue = () => values[index++];
+</script>
+
+<Rerender {generateValue}></Rerender>
diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte
new file mode 100644
index 0000000000..10403bf58b
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte
@@ -0,0 +1,16 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Rerender } from "../..";
+
+  let index = 0;
+
+  const values = [0, 1, 2];
+
+  /** @type {() => number}*/
+  const generateValue = () => values[index++];
+</script>
+
+<Rerender {generateValue} let:value>
+  <span>now the value is: {value}</span>
+</Rerender>
diff --git a/explorer/src/lib/dusk/components/index.js b/explorer/src/lib/dusk/components/index.js
index 0be65f3158..d3066574f1 100644
--- a/explorer/src/lib/dusk/components/index.js
+++ b/explorer/src/lib/dusk/components/index.js
@@ -6,6 +6,8 @@ export { default as Card } from "./card/Card.svelte";
 export { default as Icon } from "./icon/Icon.svelte";
 export { default as NavList } from "./nav-list/NavList.svelte";
 export { default as ProgressBar } from "./progress-bar/ProgressBar.svelte";
+export { default as Rerender } from "./rerender/Rerender.svelte";
+export { default as RelativeTime } from "./relative-time/RelativeTime.svelte";
 export { default as Select } from "./select/Select.svelte";
 export { default as Switch } from "./switch/Switch.svelte";
 export { default as Textbox } from "./textbox/Textbox.svelte";
diff --git a/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte b/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte
new file mode 100644
index 0000000000..e7499faaac
--- /dev/null
+++ b/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte
@@ -0,0 +1,31 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { Rerender } from "..";
+  import { getRelativeTimeString, makeClassName } from "$lib/dusk/string";
+
+  /** @type {boolean} */
+  export let autoRefresh = false;
+
+  /** @type {string | undefined} */
+  export let className = undefined;
+
+  /** @type {Date} */
+  export let date;
+
+  $: classes = makeClassName(["dusk-relative-time", className]);
+</script>
+
+<time {...$$restProps} class={classes} datetime={date.toISOString()}>
+  {#if autoRefresh}
+    <Rerender
+      generateValue={() => getRelativeTimeString(date, "long")}
+      let:value
+    >
+      <slot relativeTime={value}>{value}</slot>
+    </Rerender>
+  {:else}
+    {@const relativeTime = getRelativeTimeString(date, "long")}
+    <slot {relativeTime}>{relativeTime}</slot>
+  {/if}
+</time>
diff --git a/explorer/src/lib/dusk/components/rerender/Rerender.svelte b/explorer/src/lib/dusk/components/rerender/Rerender.svelte
new file mode 100644
index 0000000000..57d3f64fb7
--- /dev/null
+++ b/explorer/src/lib/dusk/components/rerender/Rerender.svelte
@@ -0,0 +1,47 @@
+<script>
+  /* eslint-disable svelte/infinite-reactive-loop */
+
+  import { areSVZ } from "lamb";
+
+  /** @typedef {any} Value */
+
+  /**
+   * If a function is passed the generated value
+   * will be used as the key for the update and as
+   * the default value for the default slot.
+   * Re-renders won't happen when the new value is
+   * equal to the previous one using the
+   * [SameValueZero comparison]{@link https://262.ecma-international.org/15.0/#sec-samevaluezero}.
+   *
+   * If no function is passed the `updateFlag`
+   * will be used as key and re-renders will
+   * happen every time at the specified interval.
+   *
+   * @type {(() => Value) | undefined}
+   */
+  export let generateValue = undefined;
+
+  /** @type {Number} */
+  export let interval = 1000;
+
+  /** @type {Value} */
+  let value = generateValue && generateValue();
+
+  let updateFlag = 0;
+
+  $: setTimeout(() => {
+    if (generateValue) {
+      const newValue = generateValue();
+
+      if (!areSVZ(value, newValue)) {
+        value = newValue;
+      }
+    }
+
+    updateFlag ^= 1;
+  }, interval);
+</script>
+
+{#key generateValue ? value : updateFlag}
+  <slot {value}>{value}</slot>
+{/key}
diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
index d2de0352fd..462b749026 100644
--- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
@@ -68,7 +68,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:54.000Z"
               slot="definition"
             >
@@ -172,7 +172,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:51.000Z"
               slot="definition"
             >
@@ -276,7 +276,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:47.000Z"
               slot="definition"
             >
@@ -380,7 +380,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:45.000Z"
               slot="definition"
             >
@@ -484,7 +484,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:42.000Z"
               slot="definition"
             >
@@ -588,7 +588,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:39.000Z"
               slot="definition"
             >
@@ -692,7 +692,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:35.000Z"
               slot="definition"
             >
@@ -796,7 +796,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:32.000Z"
               slot="definition"
             >
@@ -900,7 +900,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:29.000Z"
               slot="definition"
             >
@@ -1004,7 +1004,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:24.000Z"
               slot="definition"
             >
@@ -1108,7 +1108,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:21.000Z"
               slot="definition"
             >
@@ -1212,7 +1212,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:26:09.000Z"
               slot="definition"
             >
@@ -1316,7 +1316,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:25:58.000Z"
               slot="definition"
             >
@@ -1420,7 +1420,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:25:55.000Z"
               slot="definition"
             >
@@ -1524,7 +1524,7 @@ exports[`Blocks page > should render the Blocks page with the mobile layout 1`]
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-05-28T14:25:36.000Z"
               slot="definition"
             >
@@ -1742,11 +1742,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,454
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:54.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -1801,11 +1802,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,453
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:51.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -1860,11 +1862,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,452
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:47.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -1919,11 +1922,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,451
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:45.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -1978,11 +1982,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,450
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:42.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2037,11 +2042,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,449
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:39.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2096,11 +2102,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,448
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:35.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2155,11 +2162,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,447
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:32.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2214,11 +2222,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,446
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:29.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2273,11 +2282,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,445
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:24.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2332,11 +2342,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,444
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:21.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2391,11 +2402,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,443
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:26:09.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2450,11 +2462,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,442
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:25:58.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2509,11 +2522,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,441
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:25:55.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
@@ -2568,11 +2582,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
                   1,365,440
                 </a>
                  
-                <small
-                  class="block__time"
+                <time
+                  class="dusk-relative-time block__time"
+                  datetime="2024-05-28T14:25:36.000Z"
                 >
                   yesterday
-                </small>
+                </time>
               </td>
               
                
diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte
index 218b84820a..939cc32b0c 100644
--- a/explorer/src/routes/blocks/block/+page.svelte
+++ b/explorer/src/routes/blocks/block/+page.svelte
@@ -1,10 +1,6 @@
 <script>
   import { navigating, page } from "$app/stores";
-  import {
-    BlockDetails,
-    LatestTransactionsCard,
-    Rerender,
-  } from "$lib/components";
+  import { BlockDetails, LatestTransactionsCard } from "$lib/components";
   import { duskAPI } from "$lib/services";
   import { appStore } from "$lib/stores";
   import { createDataStore } from "$lib/dusk/svelte-stores";
@@ -39,17 +35,15 @@
     <BlockDetails on:retry={getBlock} {data} {error} loading={isLoading} />
   </div>
   <div class="block__transactions">
-    <Rerender>
-      <LatestTransactionsCard
-        on:retry={getBlock}
-        txns={data?.transactions.data}
-        {error}
-        loading={isLoading}
-        isOnHomeScreen={false}
-        {isSmallScreen}
-        displayTooltips={true}
-      />
-    </Rerender>
+    <LatestTransactionsCard
+      on:retry={getBlock}
+      txns={data?.transactions.data}
+      {error}
+      loading={isLoading}
+      isOnHomeScreen={false}
+      {isSmallScreen}
+      displayTooltips={true}
+    />
   </div>
 </section>
 
diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
index 104827c559..190ed7ade5 100644
--- a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
@@ -68,7 +68,6 @@ exports[`Block Details > should render the Block Details page and query the nece
        
     </div>
     
-    
   </div>
 </section>
 `;
@@ -219,13 +218,12 @@ exports[`Block Details > should render the Block Details page and query the nece
             class="details-list__definition"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-04-16T20:07:02.000Z"
               slot="definition"
             >
               Tue, 16 Apr 2024 20:07:02 GMT (last month)
               
-               
             </time>
           </dd>
           <dt
@@ -525,11 +523,12 @@ exports[`Block Details > should render the Block Details page and query the nece
                     3a3f6f90a1...e2e37f0602
                   </a>
                    
-                  <small
-                    class="transaction__time"
+                  <time
+                    class="dusk-relative-time transaction__time"
+                    datetime="2024-04-16T20:07:02.000Z"
                   >
                     last month
-                  </small>
+                  </time>
                 </td>
                 
                  
@@ -599,11 +598,12 @@ exports[`Block Details > should render the Block Details page and query the nece
                     07bfabea1d...2723b76d00
                   </a>
                    
-                  <small
-                    class="transaction__time"
+                  <time
+                    class="dusk-relative-time transaction__time"
+                    datetime="2024-04-16T20:07:02.000Z"
                   >
                     last month
-                  </small>
+                  </time>
                 </td>
                 
                  
@@ -669,7 +669,6 @@ exports[`Block Details > should render the Block Details page and query the nece
        
     </div>
     
-    
   </div>
 </section>
 `;
@@ -820,13 +819,12 @@ exports[`Block Details > should render the Transaction section of the Block Deta
             class="details-list__definition"
           >
             <time
-              class="block-details__list-timestamp"
+              class="dusk-relative-time block-details__list-timestamp"
               datetime="2024-04-16T20:07:02.000Z"
               slot="definition"
             >
               Tue, 16 Apr 2024 20:07:02 GMT (last month)
               
-               
             </time>
           </dd>
           <dt
@@ -1121,11 +1119,12 @@ exports[`Block Details > should render the Transaction section of the Block Deta
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-04-16T20:07:02.000Z"
               slot="definition"
             >
               last month
+              
             </time>
           </dd>
            
@@ -1336,11 +1335,12 @@ exports[`Block Details > should render the Transaction section of the Block Deta
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-04-16T20:07:02.000Z"
               slot="definition"
             >
               last month
+              
             </time>
           </dd>
            
@@ -1497,7 +1497,6 @@ exports[`Block Details > should render the Transaction section of the Block Deta
        
     </div>
     
-    
   </div>
 </section>
 `;
diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
index 4de3b3ca4c..af7c8ec54e 100644
--- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
@@ -68,7 +68,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:42:20.000Z"
               slot="definition"
             >
@@ -185,7 +185,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:42:08.000Z"
               slot="definition"
             >
@@ -302,7 +302,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:41:58.000Z"
               slot="definition"
             >
@@ -419,7 +419,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:40:57.000Z"
               slot="definition"
             >
@@ -536,7 +536,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:40:28.000Z"
               slot="definition"
             >
@@ -653,7 +653,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:39:59.000Z"
               slot="definition"
             >
@@ -770,7 +770,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:39:13.000Z"
               slot="definition"
             >
@@ -887,7 +887,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:01:59.000Z"
               slot="definition"
             >
@@ -1004,7 +1004,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:01:15.000Z"
               slot="definition"
             >
@@ -1121,7 +1121,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T05:00:40.000Z"
               slot="definition"
             >
@@ -1238,7 +1238,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:52:39.000Z"
               slot="definition"
             >
@@ -1355,7 +1355,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:51:02.000Z"
               slot="definition"
             >
@@ -1472,7 +1472,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:50:30.000Z"
               slot="definition"
             >
@@ -1589,7 +1589,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:48:45.000Z"
               slot="definition"
             >
@@ -1706,7 +1706,7 @@ exports[`Transactions page > should render the Transactions page with the mobile
             class="details-list__definition details-list__definition--table"
           >
             <time
-              class="transaction-details__list-timestamp"
+              class="dusk-relative-time transaction-details__list-timestamp"
               datetime="2024-05-29T04:47:48.000Z"
               slot="definition"
             >
@@ -1944,11 +1944,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   070280c695...94efca2a0e
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:42:20.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2018,11 +2019,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   534f753d5a...5153259c00
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:42:08.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2092,11 +2094,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   c6f13af20c...fc68ebb102
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:41:58.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2166,11 +2169,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   31c7dce26a...bf7bcb4c04
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:40:57.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2240,11 +2244,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   4fa6e913c0...9e4dd5510d
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:40:28.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2314,11 +2319,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   d1a7928a43...79ccdb2e04
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:39:59.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2388,11 +2394,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   004ca8683c...cff9718b06
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:39:13.000Z"
                 >
                   18 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2462,11 +2469,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   b5a77063e4...4496253a05
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:01:59.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2536,11 +2544,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   b263d9d594...9d80b06e0b
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:01:15.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2610,11 +2619,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   b4525cb82f...f5275d7709
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T05:00:40.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2684,11 +2694,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   40fb9d20eb...516584df08
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T04:52:39.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2758,11 +2769,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   b5ad0ec014...04f807910b
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T04:51:02.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2832,11 +2844,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   56504a6d62...ba14520c00
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T04:50:30.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2906,11 +2919,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   d65e4ebe37...d5026ea001
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T04:48:45.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
@@ -2980,11 +2994,12 @@ exports[`Transactions page > should render the Transactions page, start polling
                   6c0ac7828b...10b1febf06
                 </a>
                  
-                <small
-                  class="transaction__time"
+                <time
+                  class="dusk-relative-time transaction__time"
+                  datetime="2024-05-29T04:47:48.000Z"
                 >
                   19 hours ago
-                </small>
+                </time>
               </td>
               
                
diff --git a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
index 2a6e81c202..173ca08b62 100644
--- a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
@@ -172,13 +172,12 @@ exports[`Transaction Details > should render the Transaction details page and qu
           class="details-list__definition"
         >
           <time
-            class="transaction-details__list-timestamp"
+            class="dusk-relative-time transaction-details__list-timestamp"
             datetime="2024-04-16T06:39:09.000Z"
             slot="definition"
           >
             Tue, 16 Apr 2024 06:39:09 GMT (last month)
             
-             
           </time>
         </dd>
         <dt