Make displaying fallback components more configurable

Author: davidde

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

@@ -18,12 +18,6 @@ export default function BlockReward(props: {
     args: [getBlockRewardUrl(props.network, props.blockNumber)],
   });
 
-  let errorFallback = <ErrorIndicator refetch={blockRewardData.fetch} />;
-  // Latest Block often doesn't have a reward yet:
-  if (props.id === 0 && blockRewardData.error && blockRewardData.error instanceof FetchError) {
-    errorFallback = <ValueWithRefetch refetch={blockRewardData.fetch} value='TBD'/>;
-  }
-
   return (
     <span className='pl-2 md:pl-4'>
       <blockRewardData.Render
@@ -33,7 +27,8 @@ export default function BlockReward(props: {
       &nbsp;&nbsp;
       <blockRewardData.Render
         valueCallback={ (data) => `Ξ${getEtherValueFromWei(data.blockReward, 4)}` }
-        errorFallback={errorFallback}
+        showErrorFallback={props.id === 0 && blockRewardData.error && blockRewardData.error instanceof FetchError}
+        errorFallback={<ValueWithRefetch refetch={blockRewardData.fetch} value='TBD'/>}
         jointClass='w-[4rem] text-(--grey-fg-color)'
       />
     </span>

src/lib/data-state/constructors/index.tsx

@@ -77,12 +77,13 @@ export const useConfig: DataStateConstructor = <T, A extends any[], R>(config: F
 
   const Render = <K extends keyof T>(conf: RenderConfig<T, K> = {}): ReactNode => {
     const { valueCallback, field, staticContent, error, loadingMessage, loadingPulseColor,
-      showFallback = true, loadingFallback, errorFallback, jointClass } = conf;
+      showFallback = true, showLoadingFallback = true, showErrorFallback = true,
+      loadingFallback, errorFallback, jointClass } = conf;
 
     switch (dataRoot.status) {
       case 'loading':
         if (showFallback) {
-          if (loadingFallback) return loadingFallback;
+          if (showLoadingFallback && loadingFallback) return loadingFallback;
           else if (loadingMessage) return <LoadingIndicator message={loadingMessage} className={jointClass} />;
           else return <LoadingPulse loadingPulseColor={loadingPulseColor} className={jointClass} content={staticContent} />;
         } return;
@@ -116,7 +117,8 @@ export const useConfig: DataStateConstructor = <T, A extends any[], R>(config: F
           return <span className={jointClass}>{ staticContent }</span>;
         }
         else if (showFallback) {
-          return errorFallback ?? <ErrorIndicator refetch={fetch} error={error} className={jointClass} />;
+          if (showErrorFallback && errorFallback) return errorFallback;
+          else return <ErrorIndicator refetch={fetch} error={error} className={jointClass} />;
         } return;
     }
   }

src/lib/data-state/types/index.ts

@@ -86,9 +86,14 @@ export type RenderConfig<T, K extends keyof T> = {
   // loadingMessage is NOT set, otherwise only the message will appear)
   loadingPulseColor?: string;
   // Optionally don't display fallback components like Loading- or ErrorIndicators:
+  // showFallback takes precedence over both showLoading and showError!
   showFallback?: boolean;
+  // Optionally display a loadingFallback (true by default):
+  showLoadingFallback?: boolean;
   // Optionally display another component instead of the default LoadingIndicator:
   loadingFallback?: ReactNode;
+  // Optionally display an errorFallback (true by default):
+  showErrorFallback?: boolean;
   // Optionally display another component instead of the default ErrorIndicator:
   errorFallback?: ReactNode;
   // Optional shared className for displayed components: