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
dusk-network · Aug 12, 2024 · 93ead95 · 93ead95
1 parent 146d974
commit 93ead95
Show file tree

Hide file tree

Showing 36 changed files with 994 additions and 441 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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"
     >