Update DataState to use LoadingPulse by default, instead of LoadingIndicator

Author: davidde

src/components/common/indicators/loading-pulse-static.tsx

@@ -5,7 +5,7 @@ import LoadingPulse from './loading-pulse';
 export default function LoadingPulseStatic<T>(props: {
   content: string,
   dataState: DataState<T>,
-  className: string, // Requires className only to set background color, width is derived from content!
+  className?: string, // Set background with text-color, takes background from currentcolor!
 }) {
   return props.dataState.error || props.dataState.value ?
     props.content

src/components/common/indicators/loading-pulse.tsx

@@ -1,8 +1,9 @@
-export default function LoadingPulse(props: { className: string, content?: string }) {
-  return ( // Requires className to set background color as well as width (unless content is used)!
-    <span className={`${props.className} animate-pulse-strong inline-block align-middle rounded-full h-[1em]`}>
+export default function LoadingPulse(props: { className?: string, content?: string }) {
+  return ( // Set background with text-color, takes background from currentcolor!
+    <span className={`${props.className} inline-block h-[1em]
+                     bg-[currentcolor] animate-pulse-strong align-middle rounded-full`}>
       <span className='invisible'>
-        {props.content ?? ' '}
+        {props.content ?? '\xa0'}
       </span>
     </span>
   );

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

@@ -1,6 +1,5 @@
 import { useDataState, FetchError } from '@/lib/data-state';
 import { getBlockRewardUrl, getEtherValueFromWei } from '@/lib/utilities';
-import LoadingPulse from '@/components/common/indicators/loading-pulse';
 import LoadingPulseStatic from '@/components/common/indicators/loading-pulse-static';
 import ErrorWithRefetch from '@/components/common/indicators/error-with-refetch';
 import ValueWithRefetch from '@/components/common/indicators/value-with-refetch';
@@ -34,13 +33,13 @@ export default function BlockReward(props: {
       <LoadingPulseStatic
         content='Block Reward:'
         dataState={blockRewardData}
-        className='bg-(--grey-fg-color)'
+        className='text-(--grey-fg-color)'
       />
       &nbsp;&nbsp;
       <blockRewardData.Render
         value={ () => blockReward }
-        loadingFallback={<LoadingPulse className='bg-(--grey-fg-color) w-[4rem]' />}
         errorFallback={errorFallback}
+        className='w-[4rem] text-(--grey-fg-color)'
       />
     </span>
   );

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

@@ -11,7 +11,6 @@ import {
 import { useDataState, DataState } from '@/lib/data-state';
 import Link from 'next/link';
 import PopoverLink from '../../../common/popover-link';
-import LoadingPulse from '@/components/common/indicators/loading-pulse';
 import LoadingPulseStatic from '@/components/common/indicators/loading-pulse-static';
 import ErrorWithRefetch from '@/components/common/indicators/error-with-refetch';
 import BlockReward from './block-reward';
@@ -35,21 +34,21 @@ export default function Block(props: {
       <div className='flex flex-col md:flex-row'>
         <div className='flex'>
           <CubeIcon className='w-10 h-10 md:w-8 md:h-8' />
-          <div className='flex md:flex-col ml-2 pt-1 md:pt-0 md:w-32'>
-            <span className='px-2 md:px-4 leading-5'>
+          <div className='flex md:flex-col ml-2 pt-1 md:pt-0 md:w-[8rem] px-2 md:px-4'>
+            <span className='leading-5'>
               <props.latestBlockData.Render
-                value={() => <Link href={`/${props.network}/block?number=${blockNumber}`}
-                                   className='text-(--link-color) hover:text-(--hover-fg-color)'>
+                value={(className) => <Link href={`/${props.network}/block?number=${blockNumber}`}
+                                   className={`${className} hover:text-(--hover-fg-color)`}>
                                 {blockNumber}
                              </Link>}
-                loadingFallback={<LoadingPulse className='bg-(--link-color) w-[5rem]' />}
+                className='text-(--link-color) w-[5em]'
               />
             </span>
-            <span className='md:pl-4 text-sm text-(--grey-fg-color)'>
+            <span className='text-sm text-(--grey-fg-color)'>
               <blockData.Render
                 value={() => `(${getBlockAgeFromSecs(getSecsFromUnixSecs(blockData.value!.timestamp))} ago)`}
-                loadingFallback={<LoadingPulse className='bg-(--grey-fg-color) w-[6rem]' />}
                 errorFallback={<ErrorWithRefetch refetch={blockData.fetch} />}
+                className='w-[6em]'
               />
             </span>
           </div>
@@ -64,15 +63,15 @@ export default function Block(props: {
           <span className='px-2 md:px-4 leading-5'>
             <blockData.Render
               value={() => `${blockData.value!.transactions.length} transactions`}
-              loadingFallback={<LoadingPulse className='bg-(--grey-fg-color) w-[8rem]' />}
               errorFallback={<ErrorWithRefetch refetch={blockData.fetch} />}
+              className='text-(--grey-fg-color) w-[8rem]'
             />
           </span>
           <span className='pl-2 md:pl-4 leading-5'>
             <LoadingPulseStatic
               content='Recipient:'
               dataState={blockData}
-              className='bg-(--grey-fg-color)'
+              className='text-(--grey-fg-color)'
             />
             &nbsp;&nbsp;
             <blockData.Render
@@ -83,8 +82,8 @@ export default function Block(props: {
                   popover={blockData.value!.miner}
                   className='left-[-37%] top-[-2.6rem] w-78 py-1.5 px-2.5'
                 />}
-              loadingFallback={<LoadingPulse className='bg-(--link-color) w-[11rem]' />}
               errorFallback={<ErrorWithRefetch refetch={blockData.fetch} />}
+              className='text-(--link-color) w-[11rem]'
             />
           </span>
         </div>

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DataState } from '@/lib/data-state';
 import ErrorWithRefetch from '@/components/common/indicators/error-with-refetch';
+import LoadingIndicator from '@/components/common/indicators/loading-indicator';
 
 
 export default function StatCard<T>(props: {
@@ -24,6 +25,7 @@ export default function StatCard<T>(props: {
           <props.dataState.Render
             value={props.value}
             errorFallback={<ErrorWithRefetch refetch={props.dataState.fetch} />}
+            loadingFallback={<LoadingIndicator />}
           />
         </div>
       </div>

src/components/content/home-page/transactions/transaction.tsx

@@ -5,7 +5,6 @@ import { BlockWithTransactions } from 'alchemy-sdk';
 import { truncateAddress, truncateTransaction, getEtherValueFromWei } from '@/lib/utilities';
 import PopoverLink from '@/components/common/popover-link';
 import { DataState } from '@/lib/data-state';
-import LoadingPulse from '@/components/common/indicators/loading-pulse';
 import LoadingPulseStatic from '@/components/common/indicators/loading-pulse-static';
 
 
@@ -15,7 +14,12 @@ export default function Transaction(props: {
   blockWithTransactions: DataState<BlockWithTransactions>,
 }) {
   // Use a callback because the transactions might still be loading:
-  const transaction = () => props.blockWithTransactions.value!.transactions[props.id];
+  const transaction = props.blockWithTransactions.value?.transactions[props.id];
+
+  const hash = transaction?.hash;
+  const ethValue = transaction?.value;
+  const from = transaction?.from;
+  const to = transaction?.to;
 
   return (
     <div className='md:min-h-[4.825rem] p-2 md:p-3 border-b border-(--border-color) last:border-0'>
@@ -26,25 +30,25 @@ export default function Transaction(props: {
             <span className='px-2 md:px-4'>
               <props.blockWithTransactions.Render
                 value={() =>
-                  <PopoverLink
-                    href={`/${props.network}/transaction?hash=${transaction().hash}`}
-                    content={truncateTransaction(transaction().hash, 18)}
-                    popover={transaction().hash}
+                  <PopoverLink // runtime error: transaction() undefined!?
+                    href={`/${props.network}/transaction?hash=${hash}`}
+                    content={truncateTransaction(hash!, 18)}
+                    popover={hash!}
                     className='-left-full top-[-2.6rem] w-120 py-1.5 px-2.5'
                   />}
-                loadingFallback={<LoadingPulse className='bg-(--link-color) w-[10rem]' />}
+                className='text-(--link-color) w-[10rem]'
                 />
             </span>
             <span className='px-2 md:pl-4'>
               <LoadingPulseStatic
                 content='Amount:'
                 dataState={props.blockWithTransactions}
-                className='bg-(--grey-fg-color)'
+                className='text-(--grey-fg-color)'
               />
               &nbsp;&nbsp;
               <props.blockWithTransactions.Render
-                value={() => `Ξ${getEtherValueFromWei(transaction().value, 6)}`}
-                loadingFallback={<LoadingPulse className='bg-(--grey-fg-color) w-[3rem]' />}
+                value={() => `Ξ${getEtherValueFromWei(ethValue!, 6)}`}
+                className='text-(--grey-fg-color) w-[3rem]'
               />
             </span>
           </div>
@@ -55,37 +59,37 @@ export default function Transaction(props: {
             <LoadingPulseStatic
               content='From:'
               dataState={props.blockWithTransactions}
-              className='bg-(--grey-fg-color)'
+              className='text-(--grey-fg-color)'
             />
             &nbsp;&nbsp;
             <props.blockWithTransactions.Render
               value={() =>
                 <PopoverLink
-                  href={`/${props.network}/address?hash=${transaction().from}`}
-                  content={truncateAddress(transaction().from, 21)}
-                  popover={transaction().from}
+                  href={`/${props.network}/address?hash=${transaction?.from}`}
+                  content={truncateAddress(transaction?.from!, 21)}
+                  popover={transaction?.from!}
                   className='left-[-35%] top-[-2.6rem] w-78 py-1.5 px-2.5'
                 />}
-              loadingFallback={<LoadingPulse className='bg-(--link-color) w-[11.5rem]' />}
+              className='text-(--link-color) w-[11.25rem]'
             />
           </span>
           <span className='pl-7 md:pl-9'>
             <LoadingPulseStatic
               content='To:'
               dataState={props.blockWithTransactions}
-              className='bg-(--grey-fg-color)'
+              className='text-(--grey-fg-color)'
             />
             &nbsp;&nbsp;
             <props.blockWithTransactions.Render
-              value={() => transaction().to ?
+              value={() => transaction?.to ?
                   <PopoverLink
-                    href={`/${props.network}/address?hash=${transaction().to}`}
-                    content={truncateAddress(transaction().to!, 21)}
-                    popover={transaction().to!}
+                    href={`/${props.network}/address?hash=${transaction?.to}`}
+                    content={truncateAddress(transaction?.to!, 21)}
+                    popover={transaction?.to!}
                     className='left-[-35%] top-[-2.6rem] w-78 py-1.5 px-2.5'
                   />
                   : <span>/</span>}
-              loadingFallback={<LoadingPulse className='bg-(--link-color) w-[11.5rem]' />}
+              className='text-(--link-color) w-[11.25rem]'
             />
           </span>
         </div>

src/lib/data-state.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import LoadingIndicator from '@/components/common/indicators/loading-indicator';
 import ErrorIndicator from '@/components/common/indicators/error-indicator';
+import LoadingPulse from '@/components/common/indicators/loading-pulse';
 
 
 type ValueRoot<T> = {
@@ -54,7 +54,7 @@ interface DataStateMethods<T> {
 // either the `ValueState`'s value, or the `ErrorState`'s error.
 interface RenderConfig {
   // Optional callback function for rendering a subfield of the `ValueState`'s value IFF that value is present:
-  value?: () => ReactNode;
+  value?: (className?: string) => ReactNode;
   // Optional short error to display instead of full error:
   error?: string;
   // Optionally don't display fallback components like Loading- or ErrorIndicators:
@@ -63,8 +63,8 @@ interface RenderConfig {
   loadingFallback?: ReactNode;
   // Optionally display another component instead of the default ErrorIndicator:
   errorFallback?: ReactNode;
-  // Optional className for the fallback component when it exists:
-  fallbackClass?: string;
+  // Optional className for the displayed component:
+  className?: string;
 }
 
 // FetchConfig is used to initialize a DataState<T>, which is a DataRoot<T>,
@@ -162,18 +162,23 @@ export const DataState = {
     const useInit = () => useEffect(() => { fetch() }, [fetch]);
 
     const Render = (conf: RenderConfig = {}): ReactNode => {
-      const { value, error, showFallback = true, loadingFallback, errorFallback, fallbackClass } = conf;
+      const { value, error, showFallback = true, loadingFallback, errorFallback, className } = conf;
 
-      if (dataRoot.value) return value ? value() : String(dataRoot.value);
+      if (dataRoot.value) {
+        return value ?
+          value(className)
+          :
+          <span className={className}>{String(dataRoot.value)}</span>;
+      }
       else if (dataRoot.error) {
         if (showFallback) {
           return errorFallback ?
-            errorFallback : <ErrorIndicator error={error} className={fallbackClass} />;
+            errorFallback : <ErrorIndicator error={error} className={className} />;
         }
       }
       else if (showFallback) {
         return loadingFallback ?
-          loadingFallback : <LoadingIndicator className={fallbackClass} />;
+          loadingFallback : <LoadingPulse className={className} />;
       }
     }