diff --git a/components/ui/story-loader.tsx b/components/ui/story-loader.tsx new file mode 100644 index 0000000..ac34020 --- /dev/null +++ b/components/ui/story-loader.tsx @@ -0,0 +1,36 @@ +"use client"; + +import { useState, useEffect } from "react"; + +const loaderSvgs = ["bang.svg", "oh.svg", "omg.svg"]; + +interface StoryLoaderProps { + text?: string; +} + +export function StoryLoader({ text = "Loading story..." }: StoryLoaderProps) { + const [currentSvgIndex, setCurrentSvgIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setCurrentSvgIndex((prev) => (prev + 1) % loaderSvgs.length); + }, 1200); // Change every 1200ms for slower transition + + return () => clearInterval(interval); + }, []); + + return ( +
+
+ Loading... +
+
{text}
+
+ ); +} \ No newline at end of file diff --git a/public/loader/bang.svg b/public/loader/bang.svg new file mode 100644 index 0000000..3ebed69 --- /dev/null +++ b/public/loader/bang.svg @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/loader/oh.svg b/public/loader/oh.svg new file mode 100644 index 0000000..7e902b6 --- /dev/null +++ b/public/loader/oh.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/loader/omg.svg b/public/loader/omg.svg new file mode 100644 index 0000000..5d0a60d --- /dev/null +++ b/public/loader/omg.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +