ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

style: add fade-in transition from skeleton to content

Browse Source 
Smooth out the jarring visual pop when loading skeletons are replaced
by real content. Only animates after an actual skeleton was shown —
cached data still renders instantly with no delay.
This commit is contained in:
Usman Baig
2026-03-13 12:45:48 +01:00
parent 0abc5cd4a8
commit 8c4bb8f861
12 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/sites/[id]/settings/page.tsx
View File

@@ -7,7 +7,7 @@ import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading } from '@/components/skeletons'
import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
import VerificationModal from '@/components/sites/VerificationModal'
import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
import { PasswordInput } from '@ciphera-net/ui'
@@ -509,6 +509,7 @@ export default function SiteSettingsPage() {
}, [site?.domain])
const showSkeleton = useMinimumLoading(siteLoading && !site)
const fadeClass = useSkeletonFade(showSkeleton)
if (showSkeleton) {
return (
@@ -542,7 +543,7 @@ export default function SiteSettingsPage() {
}
return (
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
<div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
<div className="space-y-8">
<div>