Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-01-23 02:35:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Lazy loading components

Browse source
This commit is contained in:
Nick Sandstrom 2025-12-17 13:35:12 -08:00
parent 1906c9955e
commit 2a0df81c59
2 changed files with 38 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/pages/DVR.jsx
View file

@ -1,4 +1,4 @@
import React, { useMemo, useState, useEffect } from 'react'; import React, { useMemo, useState, useEffect, lazy, Suspense } from 'react';
import { import {
Box, Box,
Button, Button,
@ -20,11 +20,12 @@ import RecordingForm from '../components/forms/Recording';
import { import {
useTimeHelpers, useTimeHelpers,
} from '../utils/dateTimeUtils.js'; } from '../utils/dateTimeUtils.js';
import { RecordingDetailsModal } from '../components/forms/RecordingDetailsModal.jsx'; const RecordingDetailsModal = lazy(() => import('../components/forms/RecordingDetailsModal'));
import { RecurringRuleModal } from '../components/forms/RecurringRuleModal.jsx'; import RecurringRuleModal from '../components/forms/RecurringRuleModal.jsx';
import { RecordingCard } from '../components/cards/RecordingCard.jsx'; import RecordingCard from '../components/cards/RecordingCard.jsx';
import { categorizeRecordings } from '../utils/pages/DVRUtils.js'; import { categorizeRecordings } from '../utils/pages/DVRUtils.js';
import { getPosterUrl } from '../utils/cards/RecordingCardUtils.js'; import { getPosterUrl } from '../utils/cards/RecordingCardUtils.js';
import ErrorBoundary from '../components/ErrorBoundary.jsx';
const DVRPage = () => { const DVRPage = () => {
const theme = useMantineTheme(); const theme = useMantineTheme();
@ -253,24 +254,28 @@ const DVRPage = () => {
{/* Details Modal */} {/* Details Modal */}
{detailsRecording && ( {detailsRecording && (
<RecordingDetailsModal <ErrorBoundary>
opened={detailsOpen} <Suspense fallback={<Text>Loading...</Text>}>
onClose={closeDetails} <RecordingDetailsModal
recording={detailsRecording} opened={detailsOpen}
channel={channels[detailsRecording.channel]} onClose={closeDetails}
posterUrl={getPosterUrl( recording={detailsRecording}
detailsRecording.custom_properties?.poster_logo_id, channel={channels[detailsRecording.channel]}
detailsRecording.custom_properties, posterUrl={getPosterUrl(
channels[detailsRecording.channel]?.logo?.cache_url detailsRecording.custom_properties?.poster_logo_id,
)} detailsRecording.custom_properties,
env_mode={useSettingsStore.getState().environment.env_mode} channels[detailsRecording.channel]?.logo?.cache_url
onWatchLive={handleOnWatchLive} )}
onWatchRecording={handleOnWatchRecording} env_mode={useSettingsStore.getState().environment.env_mode}
onEdit={(rec) => { onWatchLive={handleOnWatchLive}
setEditRecording(rec); onWatchRecording={handleOnWatchRecording}
closeDetails(); onEdit={(rec) => {
}} setEditRecording(rec);
/> closeDetails();
}}
/>
</Suspense>
</ErrorBoundary>
)} )}
</Box> </Box>
); );

14
frontend/src/pages/Login.jsx
View file

@ -1,13 +1,21 @@
import React from 'react'; import React, { lazy, Suspense } from 'react';
import LoginForm from '../components/forms/LoginForm'; import LoginForm from '../components/forms/LoginForm';
import SuperuserForm from '../components/forms/SuperuserForm'; const SuperuserForm = lazy(() => import('../components/forms/SuperuserForm'));
import useAuthStore from '../store/auth'; import useAuthStore from '../store/auth';
import ErrorBoundary from '../components/ErrorBoundary.jsx';
import { Text } from '@mantine/core';
const Login = ({}) => { const Login = ({}) => {
const superuserExists = useAuthStore((s) => s.superuserExists); const superuserExists = useAuthStore((s) => s.superuserExists);
if (!superuserExists) { if (!superuserExists) {
return <SuperuserForm />; return (
<ErrorBoundary>
<Suspense fallback={<Text>Loading...</Text>}>
<SuperuserForm />
</Suspense>
</ErrorBoundary>
);
} }
return <LoginForm />; return <LoginForm />;