sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce a new custom loading spinner component with animations

Browse Source 
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
This commit is contained in:
sebastjanartic
2025-09-02 10:38:08 +00:00
parent c3f50f869a
commit 72bded4b3d
10 changed files with 106 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/FolxStadlPage.tsx
+7 -1
View File
@@ -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>
);
}
client/src/pages/GeschichteLiedPage.tsx
+7 -1
View File
@@ -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>
);
}
client/src/pages/GipfelstammtischPage.tsx
+7 -1
View File
@@ -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>
);
}
client/src/pages/VideoPage.tsx
+14 -2
View File
@@ -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>
);
}