DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: settings page lag (#736)

Browse Source 
* feat: made a handler for github stats messages same way as the rest

* fix: remove settingsPageLag through incremental rendering and efficient update of local storage

* refactor: passed eslint

* chore: added GitHubStats types

* feat: added contributor card skeletons

* refactor: pass eslint

* feat: removed trickle rendering and added locking to setCachedData

---------

Co-authored-by: Derek <derex1987@gmail.com>
Co-authored-by: Diego Perez <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Sebastian Leiman
2026-01-30 22:20:55 +00:00
committed by GitHub
parent 4776029cb4
commit ea54d926ab
8 changed files with 161 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/components/settings/ContributorCardSkeleton.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
/**
* Lightweight skeleton placeholder for contributor cards while data loads
*/
export const ContributorCardSkeleton: React.FC = () => (
<div className='border border-gray-300 rounded bg-ut-gray/10 p-4 animate-pulse'>
<div className='h-4 w-3/4 bg-gray-300 rounded mb-2' />
<div className='h-3 w-1/2 bg-gray-300 rounded mb-1' />
<div className='h-3 w-1/4 bg-gray-300 rounded' />
</div>
);
export default ContributorCardSkeleton;

31
src/views/components/settings/Settings.tsx
View File

@@ -20,7 +20,7 @@ import useChangelog from '@views/hooks/useChangelog';
import useSchedules from '@views/hooks/useSchedules';
import { GitHubStatsService, LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_SWE } from '@views/lib/getGitHubStats';
// Misc
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
// Icons
import IconoirGitFork from '~icons/iconoir/git-fork';
@@ -29,6 +29,7 @@ import { useMigrationDialog } from '../common/MigrationDialog';
import { AdvancedSettings } from './AdvancedSettings';
import { DEV_MODE_CLICK_TARGET, INCLUDE_MERGED_PRS, STATS_TOGGLE_KEY } from './constants';
import { ContributorCard } from './ContributorCard';
import { ContributorCardSkeleton } from './ContributorCardSkeleton';
import DevMode from './DevMode';
import { useBirthdayCelebration } from './useBirthdayCelebration';
import { useDevMode } from './useDevMode';
@@ -62,6 +63,9 @@ export default function Settings(): JSX.Element {
const [devMode, toggleDevMode] = useDevMode(DEV_MODE_CLICK_TARGET);
const { showParticles, particlesInit, particlesOptions, triggerCelebration, isBirthday } = useBirthdayCelebration();
// Stable skeleton ids to avoid using array index as keys
const skeletonIdsRef = useRef<string[]>(Array.from({ length: 8 }, (_, i) => `skeleton-${i}`));
// Initialize settings and listeners
useEffect(() => {
const fetchGitHubStats = async () => {
@@ -361,7 +365,6 @@ export default function Settings(): JSX.Element {
))}
</div>
</section>
<section className='my-8'>
<h2 className='mb-4 text-xl text-ut-black font-semibold'>UTRP CONTRIBUTORS</h2>
<div className='grid grid-cols-2 gap-4 2xl:grid-cols-4 md:grid-cols-3 xl:grid-cols-3'>
@@ -376,17 +379,19 @@ export default function Settings(): JSX.Element {
includeMergedPRs={INCLUDE_MERGED_PRS}
/>
))}
{additionalContributors.map(username => (
<ContributorCard
key={username}
name={githubStats!.names[username] || username}
githubUsername={username}
roles={['Contributor']}
stats={githubStats!.userGitHubStats[username]}
showStats={showGitHubStats}
includeMergedPRs={INCLUDE_MERGED_PRS}
/>
))}
{githubStats === null
? skeletonIdsRef.current.slice(0, 8).map(id => <ContributorCardSkeleton key={id} />)
: additionalContributors.map(username => (
<ContributorCard
key={username}
name={githubStats!.names[username] || username}
githubUsername={username}
roles={['Contributor']}
stats={githubStats!.userGitHubStats[username]}
showStats={showGitHubStats}
includeMergedPRs={INCLUDE_MERGED_PRS}
/>
))}
</div>
</section>
</section>