Skip to content

Commit 3146a82

Browse files
HazATHazAT
committed
feat: Add loading states
1 parent 2fd067b commit 3146a82

File tree

6 files changed

+105
-23
lines changed

6 files changed

+105
-23
lines changed

‎app/changelog/[slug]/loading.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Article from 'sentry-docs/components/changelog/article';
2+
3+
export default function Loading() {
4+
return (
5+
<div className="relative min-h-[calc(100vh-8rem)] w-full mx-auto grid grid-cols-12 bg-gray-200">
6+
<div className="col-span-12 md:col-start-3 md:col-span-8">
7+
<div className="max-w-3xl mx-auto px-4 p-4 sm:px-6 lg:px-8 mt-16">
8+
<Article loading />
9+
</div>
10+
</div>
11+
</div>
12+
);
13+
}

‎app/changelog/globals.css

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@tailwind components;
55
@tailwind utilities;
66

7-
87
.radix-themes {
98
--cursor-button: pointer;
109
}

‎app/changelog/header.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Image from 'next/image';
2+
3+
export default function Header({loading}) {
4+
return (
5+
<div className="w-full mx-auto h-96 relative bg-darkPurple">
6+
<div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 pt-8 grid grid-cols-12 items-center">
7+
<Image
8+
className={`justify-self-center col-span-10 z-20 hidden lg:block ${loading ? 'animate-fade-in-left' : ''}`}
9+
src="/changelog/assets/hero.png"
10+
alt="Sentry Changelog"
11+
height={273}
12+
width={450}
13+
/>
14+
<div
15+
className={`relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-2 ${loading ? 'animate-fade-in-right' : ''}`}
16+
>
17+
<h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left">
18+
Sentry Changelog
19+
</h1>
20+
<h2 className="justify-self-center z-20 text-gold text-1xl text-center lg:text-left">
21+
Stay up to date on everything big and small, from product updates to SDK
22+
changes with the Sentry Changelog.
23+
</h2>
24+
</div>
25+
</div>
26+
<div className="hero-bottom-left-down-slope absolute bottom-0 w-full h-10 bg-gray-200" />
27+
</div>
28+
);
29+
}

‎app/changelog/loading.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {Fragment} from 'react';
2+
3+
import Article from 'sentry-docs/components/changelog/article';
4+
5+
import Header from './header';
6+
7+
export default function Loading() {
8+
return (
9+
<Fragment>
10+
<Header loading />
11+
<div className="w-full mx-auto grid grid-cols-12 bg-gray-200">
12+
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
13+
<h3 className="text-2xl text-primary font-semibold mb-2">Categories:</h3>
14+
<div className="flex flex-wrap gap-1 py-1">
15+
<div className="bg-gray-300 animate-pulse block rounded w-40 h-8" />
16+
<div className="flex flex-wrap gap-1 py-1 mt-2">
17+
<div className="bg-gray-300 animate-pulse block rounded w-12 h-6" />
18+
<div className="bg-gray-300 animate-pulse block rounded w-20 h-6" />
19+
<div className="bg-gray-300 animate-pulse block rounded w-12 h-6" />
20+
<div className="bg-gray-300 animate-pulse block rounded w-20 h-6" />
21+
<div className="bg-gray-300 animate-pulse block rounded w-16 h-6" />
22+
<div className="bg-gray-300 animate-pulse block rounded w-12 h-6" />
23+
</div>
24+
</div>
25+
</div>
26+
<div className="col-span-12 md:col-span-8">
27+
<div className="max-w-3xl mx-auto px-4 pb-4 sm:px-6 md:px-8 mt-28">
28+
<Article loading />
29+
</div>
30+
</div>
31+
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
32+
<h3 className="text-1xl text-primary font-semibold mb-2">Jump to:</h3>
33+
<div className="bg-gray-300 animate-pulse block rounded w-40 h-6" />
34+
<div className="bg-gray-300 animate-pulse block rounded w-32 h-6 mt-2" />
35+
<div className="bg-gray-300 animate-pulse block rounded w-32 h-6 mt-2" />
36+
<div className="bg-gray-300 animate-pulse block rounded w-32 h-6 mt-2" />
37+
</div>
38+
</div>
39+
</Fragment>
40+
);
41+
}

‎app/changelog/page.tsx

+3-22
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Fragment, Suspense} from 'react';
22
import * as Sentry from '@sentry/nextjs';
33
import type {Metadata} from 'next';
4-
import Image from 'next/image';
54
import Link from 'next/link';
65

76
import Article from 'sentry-docs/components/changelog/article';
@@ -12,6 +11,8 @@ import Search from 'sentry-docs/components/changelog/search';
1211
import Tags from 'sentry-docs/components/changelog/tags';
1312
import {prisma} from 'sentry-docs/prisma';
1413

14+
import Header from './header';
15+
1516
const ENTRIES_PER_PAGE = 10;
1617

1718
export default async function ChangelogList({
@@ -124,27 +125,7 @@ export default async function ChangelogList({
124125

125126
return (
126127
<Fragment>
127-
<div className="w-full mx-auto h-96 relative bg-darkPurple">
128-
<div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 pt-8 grid grid-cols-12 items-center">
129-
<Image
130-
className="justify-self-center col-span-10 z-20 hidden lg:block"
131-
src="/changelog/assets/hero.png"
132-
alt="Sentry Changelog"
133-
height={273}
134-
width={450}
135-
/>
136-
<div className="relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-2">
137-
<h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left">
138-
Sentry Changelog
139-
</h1>
140-
<h2 className="justify-self-center z-20 text-gold text-1xl text-center lg:text-left">
141-
Stay up to date on everything big and small, from product updates to SDK
142-
changes with the Sentry Changelog.
143-
</h2>
144-
</div>
145-
</div>
146-
<div className="hero-bottom-left-down-slope absolute bottom-0 w-full h-10 bg-gray-200" />
147-
</div>
128+
<Header loading={false} />
148129
<div className="w-full mx-auto grid grid-cols-12 bg-gray-200">
149130
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
150131
<h3 className="text-2xl text-primary font-semibold mb-2">Categories:</h3>

‎tailwind.config.js

+19
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,25 @@ module.exports = {
88
],
99
theme: {
1010
extend: {
11+
animation: {
12+
'fade-in': 'fadeIn 0.35s ease-in-out',
13+
'fade-in-left': 'fadeInLeft 0.55s ease-in-out',
14+
'fade-in-right': 'fadeInRight 0.55s ease-in-out',
15+
},
16+
keyframes: () => ({
17+
fadeIn: {
18+
'0%': {opacity: 0},
19+
'100%': {opacity: 1},
20+
},
21+
fadeInLeft: {
22+
'0%': {opacity: 0, transform: 'translateX(-20px)'},
23+
'100%': {opacity: 1, transform: 'translateX(0)'},
24+
},
25+
fadeInRight: {
26+
'0%': {opacity: 0, transform: 'translateX(20px)'},
27+
'100%': {opacity: 1, transform: 'translateX(0)'},
28+
},
29+
}),
1130
fontFamily: {
1231
sans: [
1332
'var(--font-rubik)',

0 commit comments

Comments
 (0)