Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-01-22 18:28:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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 {
Box,
Button,
@ -20,11 +20,12 @@ import RecordingForm from '../components/forms/Recording';
import {
useTimeHelpers,
} from '../utils/dateTimeUtils.js';
import { RecordingDetailsModal } from '../components/forms/RecordingDetailsModal.jsx';
import { RecurringRuleModal } from '../components/forms/RecurringRuleModal.jsx';
import { RecordingCard } from '../components/cards/RecordingCard.jsx';
const RecordingDetailsModal = lazy(() => import('../components/forms/RecordingDetailsModal'));
import RecurringRuleModal from '../components/forms/RecurringRuleModal.jsx';
import RecordingCard from '../components/cards/RecordingCard.jsx';
import { categorizeRecordings } from '../utils/pages/DVRUtils.js';
import { getPosterUrl } from '../utils/cards/RecordingCardUtils.js';
import ErrorBoundary from '../components/ErrorBoundary.jsx';
const DVRPage = () => {
const theme = useMantineTheme();
@ -253,24 +254,28 @@ const DVRPage = () => {
{/* Details Modal */}
{detailsRecording && (
<RecordingDetailsModal
opened={detailsOpen}
onClose={closeDetails}
recording={detailsRecording}
channel={channels[detailsRecording.channel]}
posterUrl={getPosterUrl(
detailsRecording.custom_properties?.poster_logo_id,
detailsRecording.custom_properties,
channels[detailsRecording.channel]?.logo?.cache_url
)}
env_mode={useSettingsStore.getState().environment.env_mode}
onWatchLive={handleOnWatchLive}
onWatchRecording={handleOnWatchRecording}
onEdit={(rec) => {
setEditRecording(rec);
closeDetails();
}}
/>
<ErrorBoundary>
<Suspense fallback={<Text>Loading...</Text>}>
<RecordingDetailsModal
opened={detailsOpen}
onClose={closeDetails}
recording={detailsRecording}
channel={channels[detailsRecording.channel]}
posterUrl={getPosterUrl(
detailsRecording.custom_properties?.poster_logo_id,
detailsRecording.custom_properties,
channels[detailsRecording.channel]?.logo?.cache_url
)}
env_mode={useSettingsStore.getState().environment.env_mode}
onWatchLive={handleOnWatchLive}
onWatchRecording={handleOnWatchRecording}
onEdit={(rec) => {
setEditRecording(rec);
closeDetails();
}}
/>
</Suspense>
</ErrorBoundary>
)}
</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 SuperuserForm from '../components/forms/SuperuserForm';
const SuperuserForm = lazy(() => import('../components/forms/SuperuserForm'));
import useAuthStore from '../store/auth';
import ErrorBoundary from '../components/ErrorBoundary.jsx';
import { Text } from '@mantine/core';
const Login = ({}) => {
const superuserExists = useAuthStore((s) => s.superuserExists);
if (!superuserExists) {
return <SuperuserForm />;
return (
<ErrorBoundary>
<Suspense fallback={<Text>Loading...</Text>}>
<SuperuserForm />
</Suspense>
</ErrorBoundary>
);
}
return <LoginForm />;