Add formatTimeElapsed function prop to LoadingBar for custom formatting of time elapsed message

Author: milesrichardson

examples/nextjs-import-airbyte-github-export-seafowl/components/LoadingBar.tsx

@@ -1,21 +1,31 @@
 import styles from "./LoadingBar.module.css";
-import { useState, useEffect } from "react";
+import { useState, useEffect, ComponentProps } from "react";
 
 export const LoadingBar = ({
   children,
   title,
+  formatTimeElapsed,
 }: {
   children?: React.ReactNode;
   title?: React.ReactNode;
+  formatTimeElapsed?: FormatTimeElapsed;
 }) => {
   return children || title ? (
-    <LoadingBarWithText title={title}>{children}</LoadingBarWithText>
+    <LoadingBarWithText formatTimeElapsed={formatTimeElapsed} title={title}>
+      {children}
+    </LoadingBarWithText>
   ) : (
-    <JustLoadingBar inBox={false} />
+    <JustLoadingBar formatTimeElapsed={formatTimeElapsed} inBox={false} />
   );
 };
 
-export const JustLoadingBar = ({ inBox }: { inBox: boolean }) => {
+export const JustLoadingBar = ({
+  inBox,
+  formatTimeElapsed,
+}: {
+  inBox: boolean;
+  formatTimeElapsed?: FormatTimeElapsed;
+}) => {
   return (
     <div
       className={[
@@ -26,28 +36,39 @@ export const JustLoadingBar = ({ inBox }: { inBox: boolean }) => {
       <div className={styles.loader}>
         <div className={styles.loaderBar}></div>
       </div>
-      <TimeElapsed />
+      <TimeElapsed formatTimeElapsed={formatTimeElapsed} />
     </div>
   );
 };
 
 export const LoadingBarWithText = ({
   children,
   title,
+  formatTimeElapsed,
 }: {
   children?: React.ReactNode;
   title?: React.ReactNode;
+  formatTimeElapsed?: FormatTimeElapsed;
 }) => {
   return (
     <div className={styles.loadingBox}>
       {title ? <h2 className={styles.loadingTitle}>{title}</h2> : null}
-      <JustLoadingBar inBox={true} />
+      <JustLoadingBar inBox={true} formatTimeElapsed={formatTimeElapsed} />
       {children}
     </div>
   );
 };
 
-const TimeElapsed = () => {
+type FormatTimeElapsed = (seconds: number) => React.ReactNode;
+
+const defaultFormatTimeElapsed: FormatTimeElapsed = (seconds) =>
+  `Time elapsed: ${seconds} seconds...`;
+
+const TimeElapsed = ({
+  formatTimeElapsed = defaultFormatTimeElapsed,
+}: {
+  formatTimeElapsed?: FormatTimeElapsed;
+}) => {
   const [seconds, setSeconds] = useState<number>(0);
 
   useEffect(() => {
@@ -62,7 +83,7 @@ const TimeElapsed = () => {
 
   return (
     <div className={styles.timeElapsed}>
-      {seconds < 2 ? <>&nbsp;</> : <>Time elapsed: {seconds} seconds...</>}
+      {seconds < 2 ? <>&nbsp;</> : <>{formatTimeElapsed(seconds)}</>}
     </div>
   );
 };