From 72bded4b3dad13c9e6fccb97fe6fd090a775566c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 10:38:08 +0000
Subject: [PATCH] Introduce a new custom loading spinner component with
 animations

Replace existing simple loading indicators with a new animated `LoadingSpinner` component across various pages and components, including `HLSPreviewThumbnail`, `NetflixGrid`, `ThumbnailGenerator`, `VideoAds`, `VideoGrid`, `FolxStadlPage`, `GeschichteLiedPage`, `GipfelstammtischPage`, and `VideoPage`. The new component features a customizable size, text, and a pulsing gradient animation, improving the visual feedback during loading states.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/UbX8tN8
---
 .../src/components/hls-preview-thumbnail.tsx  |  8 +++---
 client/src/components/loading-spinner.tsx     | 28 +++++++++++++++++++
 client/src/components/netflix-grid.tsx        | 26 +++++++----------
 client/src/components/thumbnail-generator.tsx |  7 ++++-
 client/src/components/video-ads.tsx           | 13 +++++----
 client/src/components/video-grid.tsx          | 27 ++++++++++--------
 client/src/pages/FolxStadlPage.tsx            |  8 +++++-
 client/src/pages/GeschichteLiedPage.tsx       |  8 +++++-
 client/src/pages/GipfelstammtischPage.tsx     |  8 +++++-
 client/src/pages/VideoPage.tsx                | 16 +++++++++--
 10 files changed, 106 insertions(+), 43 deletions(-)
 create mode 100644 client/src/components/loading-spinner.tsx

diff --git a/client/src/components/hls-preview-thumbnail.tsx b/client/src/components/hls-preview-thumbnail.tsx
index 9d946e7..f3df706 100644
--- a/client/src/components/hls-preview-thumbnail.tsx
+++ b/client/src/components/hls-preview-thumbnail.tsx
@@ -266,10 +266,10 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
         
         {/* Loading state */}
         {!isVideoLoaded && (
-          <div className="absolute top-2 left-2 flex items-center space-x-1">
-            <div className="w-2 h-2 bg-bunny-blue rounded-full animate-pulse"></div>
-            <div className="w-2 h-2 bg-bunny-blue rounded-full animate-pulse animation-delay-75"></div>
-            <div className="w-2 h-2 bg-bunny-blue rounded-full animate-pulse animation-delay-150"></div>
+          <div className="absolute top-2 left-2">
+            <div className="w-6 h-6 gradient-primary rounded flex items-center justify-center animate-pulse">
+              <div className="w-0 h-0 border-l-[4px] border-l-white border-y-[3px] border-y-transparent"></div>
+            </div>
           </div>
         )}
       </div>
diff --git a/client/src/components/loading-spinner.tsx b/client/src/components/loading-spinner.tsx
new file mode 100644
index 0000000..b41497d
--- /dev/null
+++ b/client/src/components/loading-spinner.tsx
@@ -0,0 +1,28 @@
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  text?: string;
+  className?: string;
+}
+
+export default function LoadingSpinner({ size = 'md', text = 'Loading...', className = '' }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-6 h-6',
+    md: 'w-10 h-10', 
+    lg: 'w-16 h-16'
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg'
+  };
+
+  return (
+    <div className={`flex flex-col items-center justify-center ${className}`}>
+      <div className={`${sizeClasses[size]} gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3`}>
+        <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
+      </div>
+      <div className={`text-white ${textSizeClasses[size]} font-medium`}>{text}</div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 9ef7df6..b0cff60 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -113,23 +113,14 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
 
   if (isLoading && videos.length === 0) {
     return (
-      <div className="space-y-8">
-        {Array.from({ length: 3 }).map((_, categoryIndex) => (
-          <div key={categoryIndex} className="space-y-4">
-            <div className="h-6 bg-bunny-gray rounded w-48 animate-pulse"></div>
-            <div className="flex space-x-4 overflow-hidden">
-              {Array.from({ length: 6 }).map((_, index) => (
-                <div key={index} className="flex-shrink-0 w-[180px] animate-pulse">
-                  <div className="bg-bunny-gray aspect-[9/16] md:aspect-[16/9] rounded-xl mb-3"></div>
-                  <div className="space-y-2">
-                    <div className="h-4 bg-bunny-gray rounded w-3/4"></div>
-                    <div className="h-3 bg-bunny-gray rounded w-1/2"></div>
-                  </div>
-                </div>
-              ))}
-            </div>
+      <div className="flex items-center justify-center py-20">
+        <div className="text-center">
+          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
-        ))}
+          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Loading videos...</p>
+        </div>
       </div>
     );
   }
@@ -137,6 +128,9 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
   if (videos.length === 0) {
     return (
       <div className="text-center py-12">
+        <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
+          <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+        </div>
         <div className="text-bunny-muted text-lg mb-4">
           No videos found
         </div>
diff --git a/client/src/components/thumbnail-generator.tsx b/client/src/components/thumbnail-generator.tsx
index f19ba18..42ccd9c 100644
--- a/client/src/components/thumbnail-generator.tsx
+++ b/client/src/components/thumbnail-generator.tsx
@@ -271,7 +271,12 @@ export default function ThumbnailGenerator({
                 
                 {!isVideoLoaded && (
                   <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
-                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
+                    <div className="text-center">
+                      <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3 mx-auto">
+                        <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+                      </div>
+                      <div className="text-white text-sm">go4.video</div>
+                    </div>
                   </div>
                 )}
               </div>
diff --git a/client/src/components/video-ads.tsx b/client/src/components/video-ads.tsx
index 3538fcb..6e7e51e 100644
--- a/client/src/components/video-ads.tsx
+++ b/client/src/components/video-ads.tsx
@@ -26,10 +26,13 @@ export default function VideoAds({ videoId }: VideoAdsProps) {
 
   if (isLoading) {
     return (
-      <Card className="p-4">
-        <div className="animate-pulse">
-          <div className="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
-          <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+      <Card className="p-6 border-gray-700 bg-gray-800">
+        <div className="text-center">
+          <div className="w-10 h-10 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3 mx-auto">
+            <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
+          </div>
+          <div className="text-white text-sm font-medium mb-1">go4.video</div>
+          <div className="text-gray-400 text-xs">Loading ads...</div>
         </div>
       </Card>
     );
@@ -43,7 +46,7 @@ export default function VideoAds({ videoId }: VideoAdsProps) {
     );
   }
 
-  const { ads = [], totalAds = 0 } = data || {};
+  const { ads = [], totalAds = 0 } = (data as any) || {};
 
   if (totalAds === 0) {
     return (
diff --git a/client/src/components/video-grid.tsx b/client/src/components/video-grid.tsx
index 8943f73..555273f 100644
--- a/client/src/components/video-grid.tsx
+++ b/client/src/components/video-grid.tsx
@@ -34,16 +34,14 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
 
   if (isLoading && videos.length === 0) {
     return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" data-testid="grid-loading">
-        {Array.from({ length: 8 }).map((_, index) => (
-          <div key={index} className="animate-pulse">
-            <div className="bg-bunny-gray aspect-video rounded-xl mb-4"></div>
-            <div className="space-y-2">
-              <div className="h-4 bg-bunny-gray rounded w-3/4"></div>
-              <div className="h-3 bg-bunny-gray rounded w-1/2"></div>
-            </div>
+      <div className="flex items-center justify-center py-20" data-testid="grid-loading">
+        <div className="text-center">
+          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
-        ))}
+          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Loading videos...</p>
+        </div>
       </div>
     );
   }
@@ -51,6 +49,9 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
   if (videos.length === 0) {
     return (
       <div className="text-center py-12">
+        <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
+          <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+        </div>
         <div className="text-bunny-muted text-lg mb-4" data-testid="text-no-videos">
           No videos found
         </div>
@@ -87,12 +88,14 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
           >
             {isLoading ? (
               <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                <span>Wird geladen...</span>
+                <div className="w-4 h-4 gradient-primary rounded flex items-center justify-center animate-pulse">
+                  <div className="w-0 h-0 border-l-[3px] border-l-white border-y-[2px] border-y-transparent"></div>
+                </div>
+                <span>Loading more...</span>
               </>
             ) : (
               <>
-                <span>Weitere Videos laden</span>
+                <span>Load more videos</span>
                 <ChevronDown className="w-4 h-4" />
               </>
             )}
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index ed4b25f..2e875a8 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -78,7 +78,13 @@ export default function FolxStadlPage() {
   if (isLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white text-xl">Wird geladen...</div>
+        <div className="text-center">
+          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
+          </div>
+          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Loading FOLX STADL...</p>
+        </div>
       </div>
     );
   }
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 5cf3e8c..d1fcdba 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -80,7 +80,13 @@ export default function GeschichteLiedPage() {
   if (isLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white text-xl">Wird geladen...</div>
+        <div className="text-center">
+          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
+          </div>
+          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Loading GESCHICHTE VUM LIED...</p>
+        </div>
       </div>
     );
   }
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index 0271018..e43e2e3 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -80,7 +80,13 @@ export default function GipfelstammtischPage() {
   if (isLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white text-xl">Wird geladen...</div>
+        <div className="text-center">
+          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
+          </div>
+          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Loading GIPFELSTAMMTISCH...</p>
+        </div>
       </div>
     );
   }
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index ea7ab1a..e51de47 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -256,7 +256,13 @@ export default function VideoPage() {
   if (videoLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white">Lade Video...</div>
+        <div className="text-center">
+          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
+          </div>
+          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Loading video...</p>
+        </div>
       </div>
     );
   }
@@ -264,7 +270,13 @@ export default function VideoPage() {
   if (!currentVideo) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white">Video nicht gefunden</div>
+        <div className="text-center">
+          <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
+            <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+          </div>
+          <h3 className="text-white text-lg font-bold mb-2">go4.video</h3>
+          <p className="text-bunny-light">Video not found</p>
+        </div>
       </div>
     );
   }