Update DataState to use ErrorWithRefetch by default, instead of ErrorIndicator

Author: davidde

src/components/common/indicators/error-with-refetch.tsx

@@ -8,9 +8,8 @@ export default function ErrorWithRefetch(props: {
   className?: string
 }) {
   return (
-    <span>
+    <span className={props.className}>
       <ErrorIndicator
-        className={props.className}
         error={props.error}
       />
       <RefetchIndicator refetch={props.refetch} />

src/components/content/home-page/blocks/block.tsx

@@ -47,7 +47,6 @@ export default function Block(props: {
             <span className='text-sm text-(--grey-fg-color)'>
               <blockData.Render
                 value={() => `(${getBlockAgeFromSecs(getSecsFromUnixSecs(blockData.value!.timestamp))} ago)`}
-                errorFallback={<ErrorWithRefetch refetch={blockData.fetch} />}
                 className='w-[6em]'
               />
             </span>
@@ -63,7 +62,6 @@ export default function Block(props: {
           <span className='px-2 md:px-4 leading-5'>
             <blockData.Render
               value={() => `${blockData.value!.transactions.length} transactions`}
-              errorFallback={<ErrorWithRefetch refetch={blockData.fetch} />}
               className='text-(--grey-fg-color) w-[8rem]'
             />
           </span>
@@ -82,7 +80,6 @@ export default function Block(props: {
                   popover={blockData.value!.miner}
                   className='left-[-37%] top-[-2.6rem] w-78 py-1.5 px-2.5'
                 />}
-              errorFallback={<ErrorWithRefetch refetch={blockData.fetch} />}
               className='text-(--link-color) w-[11rem]'
             />
           </span>

src/components/content/home-page/stats/stat-card.tsx

@@ -24,7 +24,6 @@ export default function StatCard<T>(props: {
         <div className='pl-12'>
           <props.dataState.Render
             value={props.value}
-            errorFallback={<ErrorWithRefetch refetch={props.dataState.fetch} />}
             loading='Loading ...'
           />
         </div>

src/lib/data-state.tsx

@@ -2,6 +2,7 @@ import { Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useMemo, u
 import ErrorIndicator from '@/components/common/indicators/error-indicator';
 import LoadingPulse from '@/components/common/indicators/loading-pulse';
 import LoadingIndicator from '@/components/common/indicators/loading-indicator';
+import ErrorWithRefetch from '@/components/common/indicators/error-with-refetch';
 
 
 type ValueRoot<T> = {
@@ -176,7 +177,7 @@ export const DataState = {
       }
       else if (dataRoot.error) {
         if (showFallback) {
-          return errorFallback ?? <ErrorIndicator error={error} className={className} />;
+          return errorFallback ?? <ErrorWithRefetch refetch={fetch} error={error} className={className} />;
         }
       }
       else if (showFallback) {