Refactor AsyncDemo and RecursiveAsyncDemo components: rename DelayWit…

…hRandomError to DelayWithError, update error handling logic, and enhance styling with new animation keyframes and refresh button icon.
HK-SHAO · Jan 27, 2025 · c1829e4 · c1829e4
1 parent e0678b4
commit c1829e4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/src/app.css b/src/app.css
@@ -6,7 +6,7 @@
   @apply dark:bg-black;
 }
 
-@keyframes bg-text-flash {
+@keyframes bg-flash {
   from {
     background-color: oklch(0.809 0.105 251.813);
     color: black;
@@ -18,6 +18,6 @@
   }
 }
 
-.inner-bg-text-flash * {
-  animation: bg-text-flash 0.5s ease-out;
+.inner-bg-flash * {
+  animation: bg-flash 0.5s ease-out;
 }
diff --git a/src/libs/components/AsyncDemo.tsx b/src/libs/components/AsyncDemo.tsx
@@ -3,24 +3,21 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { $signal, Async, type AsyncFC, type StateFC } from 'react-client-async';
 import delayWithSignal from '#utils/delayWithSignal';
 
-const DelayWithRandomError: AsyncFC<{
+const DelayWithError: AsyncFC<{
   count: number;
   addCount: () => void;
 }> = memo(async ({ [$signal]: signal, count, addCount }) => {
   await delayWithSignal(1000, signal);
 
-  // Randomly throw an error.
-  if (Math.random() < 0.5) {
-    throw new Error('Random Error');
-  }
+  if (count % 2 !== 0) throw new Error('Error when count is odd');
 
   return (
     <button
       type="button"
       className="flex justify-center items-center ml-2 btn btn-blue"
       onClick={addCount}
     >
-      Async Component
+      Async component has loaded
       <span className="inline bg-black/20 ml-2 px-4 py-0.5 rounded-full text-sm">
         {count}
       </span>
@@ -70,7 +67,7 @@ export default function AsyncDemo() {
   return (
     <div className="flex flex-col items-center gap-2">
       <Async
-        $fc={DelayWithRandomError}
+        $fc={DelayWithError}
         $waiting={waiting}
         $fallback={fallback}
         // The props for the async component.

diff --git a/src/libs/components/RecursiveAsyncDemo.tsx b/src/libs/components/RecursiveAsyncDemo.tsx
@@ -55,13 +55,11 @@ export default function RecursiveAsyncDemo() {
 
   return (
     <div className="flex flex-col justify-center items-center gap-4">
-      <div className="w-[42em] text-xs [&>.grid]:place-items-center [&_*]:rounded-full font-bold">
-        <div
-          className="grid grid-cols-[repeat(auto-fill,minmax(2em,1fr))] text-shadow min-h-28 inner-bg-text-flash"
-          style={{ textShadow: 'rgba(0, 0, 0, 0.1) 0px 1px' }}
-        >
-          {hide ? null : <Rec n={52} seed={seed} />}
-        </div>
+      <div
+        className="place-items-center grid grid-cols-[repeat(auto-fill,minmax(2em,1fr))] inner-bg-flash [&_*]:rounded-full w-[42em] h-28 font-bold text-xs"
+        style={{ textShadow: 'rgba(0, 0, 0, 0.1) 0px 1px' }}
+      >
+        {hide ? null : <Rec n={52} seed={seed} />}
       </div>
       <div className="flex gap-4">
         <button
@@ -80,7 +78,23 @@ export default function RecursiveAsyncDemo() {
           className="flex justify-center items-center btn btn-red"
           onClick={refresh}
         >
-          ⟳
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <title>refresh</title>
+            <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+            <path d="M3 3v5h5" />
+            <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+            <path d="M16 16h5v5" />
+          </svg>
         </button>
       </div>
     </div>