Add a loading prop to RenderConfig

Author: davidde

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

@@ -1,16 +1,16 @@
-export default function LoadingIndicator(props: { className?: string }) {
-  const letters = ['L', 'o', 'a', 'd', 'i', 'n', 'g', '\u00A0', '.', '.', '.'];
+export default function LoadingIndicator(props: { message?: string, className?: string }) {
+  const chars = Array.from(props.message ?? 'Loading ...');
 
   return (
     <span className={`${props.className} inline-flex`}>
       {
-        letters.map((char, index) =>
+        chars.map((char, i) =>
           <span
-            key={index}
+            key={i}
             className='italic animate-(--animate-glow)'
-            style={{animationDelay: `${index * 0.1}s`}}
+            style={{animationDelay: `${i * 0.1}s`}}
           >
-            {char}
+            {char === ' ' ? '\u00A0' : char}
           </span>
         )
       }

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

@@ -25,7 +25,7 @@ export default function StatCard<T>(props: {
           <props.dataState.Render
             value={props.value}
             errorFallback={<ErrorWithRefetch refetch={props.dataState.fetch} />}
-            loadingFallback={<LoadingIndicator />}
+            loading='Loading ...'
           />
         </div>
       </div>

src/lib/data-state.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ErrorIndicator from '@/components/common/indicators/error-indicator';
 import LoadingPulse from '@/components/common/indicators/loading-pulse';
+import LoadingIndicator from '@/components/common/indicators/loading-indicator';
 
 
 type ValueRoot<T> = {
@@ -54,9 +55,12 @@ 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:
+  // (Can optionally use the className provided to the render function, see below)
   value?: (className?: string) => ReactNode;
-  // Optional short error to display instead of full error:
+  // Optional error message to display instead of 'Error':
   error?: string;
+  // Optional message to display while loading:
+  loading?: string;
   // Optionally don't display fallback components like Loading- or ErrorIndicators:
   showFallback?: boolean;
   // Optionally display another component instead of the default LoadingIndicator:
@@ -162,7 +166,7 @@ export const DataState = {
     const useInit = () => useEffect(() => { fetch() }, [fetch]);
 
     const Render = (conf: RenderConfig = {}): ReactNode => {
-      const { value, error, showFallback = true, loadingFallback, errorFallback, className } = conf;
+      const { value, error, loading, showFallback = true, loadingFallback, errorFallback, className } = conf;
 
       if (dataRoot.value) {
         return value ?
@@ -172,13 +176,13 @@ export const DataState = {
       }
       else if (dataRoot.error) {
         if (showFallback) {
-          return errorFallback ?
-            errorFallback : <ErrorIndicator error={error} className={className} />;
+          return errorFallback ?? <ErrorIndicator error={error} className={className} />;
         }
       }
       else if (showFallback) {
-        return loadingFallback ?
-          loadingFallback : <LoadingPulse className={className} />;
+        if (loadingFallback) return loadingFallback;
+        if (loading) return <LoadingIndicator message={loading} className={className} />;
+        return <LoadingPulse className={className} />;
       }
     }