From 5d18fad18aa0dafc2f36ac8a0af72c1cbfcf4bd7 Mon Sep 17 00:00:00 2001 From: Riccardo Giorato Date: Fri, 26 Dec 2025 19:39:22 +0100 Subject: [PATCH] add story loader --- components/ui/story-loader.tsx | 36 +++++++ public/loader/bang.svg | 175 +++++++++++++++++++++++++++++++++ public/loader/oh.svg | 84 ++++++++++++++++ public/loader/omg.svg | 96 ++++++++++++++++++ 4 files changed, 391 insertions(+) create mode 100644 components/ui/story-loader.tsx create mode 100644 public/loader/bang.svg create mode 100644 public/loader/oh.svg create mode 100644 public/loader/omg.svg 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +