Skip to content

Commit d76c5d6

Browse files
yash-pouranikyash-pouranik
authored
Merge pull request #109 from Nitin-kumar-yadav1307/feat/skeleton-loaders-settings-release-webhook
Add skeleton loaders to Settings, Releases, and Webhooks pages
2 parents 4e6b3c7 + c110acf commit d76c5d6

3 files changed

Lines changed: 73 additions & 9 deletions

File tree

‎apps/web-dashboard/src/pages/Releases.jsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,21 @@ export default function Releases() {
5050
</div>
5151

5252
{loading ? (
53-
<div style={{ textAlign: 'center', padding: '40px' }}>
54-
<div className="spinner" style={{ margin: '0 auto' }}></div>
53+
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
54+
{[1, 2, 3].map(i => (
55+
<div key={i} className="glass-card" style={{ borderRadius: '12px', padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
56+
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
57+
<div className="skeleton" style={{ width: '80px', height: '24px', borderRadius: '20px' }} />
58+
<div className="skeleton" style={{ width: '120px', height: '14px' }} />
5559
</div>
56-
) : releases.length === 0 ? (
60+
<div className="skeleton" style={{ width: '60%', height: '28px' }} />
61+
<div className="skeleton" style={{ width: '100%', height: '14px' }} />
62+
<div className="skeleton" style={{ width: '80%', height: '14px' }} />
63+
<div className="skeleton" style={{ width: '90%', height: '14px' }} />
64+
</div>
65+
))}
66+
</div>
67+
) : releases.length === 0 ? (
5768
<div style={{ textAlign: 'center', padding: '80px 20px', background: 'var(--color-bg-secondary)', borderRadius: '12px', border: '1px solid var(--color-border)' }}>
5869
<Rocket size={48} color="var(--color-text-muted)" style={{ marginBottom: '20px' }} />
5970
<h3>No releases yet</h3>

‎apps/web-dashboard/src/pages/Settings.jsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { API_URL } from '../config';
77
import ConfirmationModal from './ConfirmationModal';
88

99
export default function Settings() {
10-
const { logout } = useAuth();
10+
const { logout, user, isLoading } = useAuth();
1111

1212
// Password State
1313
const [passData, setPassData] = useState({ currentPassword: '', newPassword: '' });
@@ -17,6 +17,7 @@ export default function Settings() {
1717
const [deletePass, setDeletePass] = useState('');
1818
const [loadingDelete, setLoadingDelete] = useState(false);
1919
const [showDeleteModal, setShowDeleteModal] = useState(false);
20+
const pageLoading = isLoading;
2021

2122
// Handle Password Change
2223
const handlePasswordChange = async (e) => {
@@ -58,6 +59,22 @@ export default function Settings() {
5859
setShowDeleteModal(true);
5960
};
6061

62+
const SettingsSkeleton = () => (
63+
<div style={{ maxWidth: '600px', margin: '0 auto', padding: '2rem', display: 'flex', flexDirection: 'column', gap: '2rem' }}>
64+
<div className="skeleton" style={{ width: '140px', height: '28px' }} />
65+
{[1, 2].map(i => (
66+
<div key={i} className="glass-card" style={{ borderRadius: '8px', padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
67+
<div className="skeleton" style={{ width: '160px', height: '20px' }} />
68+
<div className="skeleton" style={{ width: '100%', height: '38px', borderRadius: '6px' }} />
69+
<div className="skeleton" style={{ width: '100%', height: '38px', borderRadius: '6px' }} />
70+
<div className="skeleton" style={{ width: '100px', height: '34px', borderRadius: '6px' }} />
71+
</div>
72+
))}
73+
</div>
74+
);
75+
76+
if (pageLoading) return <SettingsSkeleton />;
77+
6178
return (
6279
<div className="container" style={{ maxWidth: '800px', margin: '0 auto', paddingBottom: '4rem' }}>
6380
<div className="page-header" style={{ marginBottom: '3rem', borderBottom: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
@@ -69,16 +86,16 @@ export default function Settings() {
6986
<div style={{
7087
padding: '6px 14px',
7188
borderRadius: '20px',
72-
backgroundColor: useAuth().user?.isVerified ? 'rgba(62, 207, 142, 0.1)' : 'rgba(255, 193, 7, 0.1)',
73-
border: `1px solid ${useAuth().user?.isVerified ? 'rgba(62, 207, 142, 0.2)' : 'rgba(255, 193, 7, 0.2)'}`,
74-
color: useAuth().user?.isVerified ? '#3ECF8E' : '#FFC107',
89+
backgroundColor: user?.isVerified ? 'rgba(62, 207, 142, 0.1)' : 'rgba(255, 193, 7, 0.1)',
90+
border: `1px solid ${user?.isVerified ? 'rgba(62, 207, 142, 0.2)' : 'rgba(255, 193, 7, 0.2)'}`,
91+
color: user?.isVerified ? '#3ECF8E' : '#FFC107',
7592
display: 'flex',
7693
alignItems: 'center',
7794
gap: '8px',
7895
fontWeight: 600,
7996
fontSize: '0.9rem'
8097
}}>
81-
{useAuth().user?.isVerified ? (
98+
{user?.isVerified ? (
8299
<>
83100
<CheckCircle size={16} /> Verified Account
84101
</>

‎apps/web-dashboard/src/pages/Webhooks.jsx‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,43 @@ export default function Webhooks() {
216216
return new Date(date).toLocaleString();
217217
};
218218

219-
if (loading) return <div className="container">Loading...</div>;
219+
const WebhooksSkeleton = () => (
220+
<div className="container" style={{ maxWidth: '900px', margin: '0 auto', padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
221+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
222+
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
223+
<div className="skeleton" style={{ width: '32px', height: '32px', borderRadius: '6px' }} />
224+
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
225+
<div className="skeleton" style={{ width: '100px', height: '18px' }} />
226+
<div className="skeleton" style={{ width: '160px', height: '12px' }} />
227+
</div>
228+
</div>
229+
<div className="skeleton" style={{ width: '120px', height: '32px', borderRadius: '6px' }} />
230+
</div>
231+
{[1, 2, 3].map(i => (
232+
<div key={i} className="glass-card" style={{ borderRadius: '8px', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
233+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
234+
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
235+
<div className="skeleton" style={{ width: '120px', height: '16px' }} />
236+
<div className="skeleton" style={{ width: '50px', height: '20px', borderRadius: '20px' }} />
237+
</div>
238+
<div style={{ display: 'flex', gap: '8px' }}>
239+
<div className="skeleton" style={{ width: '60px', height: '28px', borderRadius: '4px' }} />
240+
<div className="skeleton" style={{ width: '60px', height: '28px', borderRadius: '4px' }} />
241+
<div className="skeleton" style={{ width: '28px', height: '28px', borderRadius: '4px' }} />
242+
</div>
243+
</div>
244+
<div className="skeleton" style={{ width: '70%', height: '12px' }} />
245+
<div style={{ display: 'flex', gap: '8px' }}>
246+
<div className="skeleton" style={{ width: '80px', height: '22px', borderRadius: '20px' }} />
247+
<div className="skeleton" style={{ width: '80px', height: '22px', borderRadius: '20px' }} />
248+
<div className="skeleton" style={{ width: '80px', height: '22px', borderRadius: '20px' }} />
249+
</div>
250+
</div>
251+
))}
252+
</div>
253+
);
254+
255+
if (loading) return <WebhooksSkeleton />;
220256

221257
return (
222258
<div className="container" style={{ maxWidth: '1100px', margin: '0 auto', paddingBottom: '4rem' }}>

0 commit comments

Comments
 (0)