From c1d1c2d7e0db75b80e1ea7bd4fe8f59bedc435e1 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 8 May 2026 09:02:19 +0200
Subject: [PATCH] feat: implement lazy loading for MediaLibraryPage and
 optimize video rendering

- Refactored MediaLibraryPage to use React's lazy loading and Suspense for improved performance during page load.
- Updated video rendering logic to utilize createElement for better flexibility and maintainability.
- Enhanced loading state with a spinner to improve user experience while media content is being fetched.
---
 frontend/src/App.jsx                    | 28 ++++++++++--
 frontend/src/pages/MediaLibraryPage.jsx | 58 ++++++++++++-------------
 2 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1c68048..4016a3c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
 import {
   BrowserRouter as Router,
   Routes,
@@ -32,10 +32,11 @@ import AdminMaturityModelsPage from './pages/AdminMaturityModelsPage'
 import TrainerContextsPage from './pages/TrainerContextsPage'
 import MediaWikiImportPage from './pages/MediaWikiImportPage'
 import AdminUsersPage from './pages/AdminUsersPage'
-import MediaLibraryPage from './pages/MediaLibraryPage'
 import ActiveClubSwitcher from './components/ActiveClubSwitcher'
 import './app.css'
 
+const MediaLibraryPage = lazy(() => import('./pages/MediaLibraryPage'))
+
 // Bottom Navigation (Mobile)
 function Nav({ isAdmin }) {
   const items = getMainNavItems(isAdmin)
@@ -159,7 +160,28 @@ function AppRoutes() {
         <Route path="profile" element={<Navigate to="/settings" replace />} />
         <Route path="settings" element={<AccountSettingsPage />} />
         <Route path="settings/system" element={<SettingsSystemInfoPage />} />
-        <Route path="media" element={<MediaLibraryPage />} />
+        <Route
+          path="media"
+          element={
+            <Suspense
+              fallback={
+                <div
+                  style={{
+                    minHeight: '50vh',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'var(--bg)',
+                  }}
+                >
+                  <div className="spinner" />
+                </div>
+              }
+            >
+              <MediaLibraryPage />
+            </Suspense>
+          }
+        />
         <Route path="exercises">
           <Route index element={<ExercisesListPage />} />
           <Route path="new" element={<ExerciseFormPage />} />
diff --git a/frontend/src/pages/MediaLibraryPage.jsx b/frontend/src/pages/MediaLibraryPage.jsx
index 4ad8f22..73898ad 100644
--- a/frontend/src/pages/MediaLibraryPage.jsx
+++ b/frontend/src/pages/MediaLibraryPage.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef, createElement } from 'react'
 import { Link } from 'react-router-dom'
 import {
   LayoutGrid,
@@ -162,24 +162,22 @@ function MediaThumb({ mediaId, mimeType }) {
     return <div className="media-library__thumb-ph">HEIC</div>
   }
   if (mime.startsWith('video/')) {
-    return (
-      <video
-        className="media-library__thumb-video"
-        src={url}
-        muted
-        playsInline
-        preload="metadata"
-        onLoadedMetadata={(e) => {
-          const el = e.target
-          try {
-            const d = el.duration
-            el.currentTime = Number.isFinite(d) && d > 0 ? Math.min(0.05, d * 0.01) : 0.05
-          } catch {
-            /* ignore */
-          }
-        }}
-      />
-    )
+    return createElement('video', {
+      className: 'media-library__thumb-video',
+      src: url,
+      muted: true,
+      playsInline: true,
+      preload: 'metadata',
+      onLoadedMetadata: (e) => {
+        const el = e.target
+        try {
+          const d = el.duration
+          el.currentTime = Number.isFinite(d) && d > 0 ? Math.min(0.05, d * 0.01) : 0.05
+        } catch {
+          /* ignore */
+        }
+      },
+    })
   }
   if (mime.startsWith('image/')) {
     return (
@@ -907,17 +905,17 @@ export default function MediaLibraryPage() {
                   )
                 }
                 if (kind === 'video') {
-                  return (
-                    <video
-                      key={preview.id}
-                      className="media-library__preview-video"
-                      src={url}
-                      controls
-                      playsInline
-                      preload="metadata"
-                    >
-                      Wiedergabe nicht unterstützt.
-                    </video>
+                  return createElement(
+                    'video',
+                    {
+                      key: preview.id,
+                      className: 'media-library__preview-video',
+                      src: url,
+                      controls: true,
+                      playsInline: true,
+                      preload: 'metadata',
+                    },
+                    'Wiedergabe nicht unterstützt.',
                   )
                 }
                 if (kind === 'pdf') {