diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx
index 09993ce0eb..90a112df5c 100644
--- a/app/components/LoadingBar.tsx
+++ b/app/components/LoadingBar.tsx
@@ -5,17 +5,17 @@ interface LoadingBarProps{
   label?: string;
   progress?: number;
   variant?: string;
-  pulsing?: boolean;
   message?: string;
   wrapperClassName?: string;
+  useFakeTimer?: number; 
 }
 export const LoadingBar = ({
   label,
-  progress = 50,
+  progress = 0,
   variant = 'primary',
-  pulsing = false,
   message,
   wrapperClassName : propsWrapperClassName,
+  useFakeTimer = (1000 * 60) //defaults to 1min
 }: LoadingBarProps) => {
 
   function getVariantClassNames(variant: string) {
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index 9414bc40ee..acc2188c52 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -3,7 +3,9 @@ import {
   Button,
   ButtonLink,
   H4, 
-  LoadingBar
+  LoadingBar,
+  LoadingDotsTyping,
+  LoadingDotsBricks,
 } from "~/components";
 
 
@@ -41,6 +43,18 @@ export default function ComponentLibrary () {
         <ButtonLink to="/">Back to /</ButtonLink>
       </div>
 
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>Loading Dots</H4>
+        <div className="flex gap-2">
+          <div className="w-60 h-40 rounded-lg overflow-hidden">
+            <LoadingDotsTyping />
+          </div>
+          <div className="w-60 h-40 rounded-lg overflow-hidden">
+            <LoadingDotsBricks />
+          </div>
+        </div>
+      </div>
+
       <div className="flex flex-col gap-2 mb-4">
         <H4>Loading Bar</H4>
         <div className="flex gap-2">