Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add Changelog loading states #9134

Merged
merged 2 commits into from
Feb 13, 2024
Merged

feat: Add Changelog loading states #9134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3146a82
feat: Add loading states
HazAT Feb 13, 2024
0f84204
loading for admin
HazAT Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions app/changelog/%5Fadmin/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default function Loading() {
return (
<div className="fixed inset-0 flex items-center justify-center">
<h3 className="text-2xl text-primary font-semibold">
<div
className="mx-auto mb-8 h-16 w-16 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"
/>{' '}
Loading...
</h3>
</div>
);
}
4 changes: 2 additions & 2 deletions app/changelog/%5Fadmin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ export default async function ChangelogsListPage() {

return (
<Fragment>
<header className="mb-4 col-start-3 col-span-2 text-left">
<header className="mb-4 col-start-2 col-span-2 text-left">
<Button>
<PlusIcon />
<Link href="/changelog/_admin/create">New Changelog</Link>
</Button>
</header>
<section className="overflow-x-auto col-start-3 col-span-8 shadow-md rounded-lg">
<section className="overflow-x-auto col-start-2 col-span-10 shadow-md rounded-lg">
<table className="w-full text-sm text-left text-gray-500">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
Expand Down
13 changes: 13 additions & 0 deletions app/changelog/[slug]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Article from 'sentry-docs/components/changelog/article';

export default function Loading() {
return (
<div className="relative min-h-[calc(100vh-8rem)] w-full mx-auto grid grid-cols-12 bg-gray-200">
<div className="col-span-12 md:col-start-3 md:col-span-8">
<div className="max-w-3xl mx-auto px-4 p-4 sm:px-6 lg:px-8 mt-16">
<Article loading />
</div>
</div>
</div>
);
}
1 change: 0 additions & 1 deletion app/changelog/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
@tailwind components;
@tailwind utilities;


.radix-themes {
--cursor-button: pointer;
}
Expand Down
29 changes: 29 additions & 0 deletions app/changelog/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import Image from 'next/image';

export default function Header({loading}) {
return (
<div className="w-full mx-auto h-96 relative bg-darkPurple">
<div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 pt-8 grid grid-cols-12 items-center">
<Image
className={`justify-self-center col-span-10 z-20 hidden lg:block ${loading ? 'animate-fade-in-left' : ''}`}
src="/changelog/assets/hero.png"
alt="Sentry Changelog"
height={273}
width={450}
/>
<div
className={`relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-2 ${loading ? 'animate-fade-in-right' : ''}`}
>
<h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left">
Sentry Changelog
</h1>
<h2 className="justify-self-center z-20 text-gold text-1xl text-center lg:text-left">
Stay up to date on everything big and small, from product updates to SDK
changes with the Sentry Changelog.
</h2>
</div>
</div>
<div className="hero-bottom-left-down-slope absolute bottom-0 w-full h-10 bg-gray-200" />
</div>
);
}
41 changes: 41 additions & 0 deletions app/changelog/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {Fragment} from 'react';

import Article from 'sentry-docs/components/changelog/article';

import Header from './header';

export default function Loading() {
return (
<Fragment>
<Header loading />
<div className="w-full mx-auto grid grid-cols-12 bg-gray-200">
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
<h3 className="text-2xl text-primary font-semibold mb-2">Categories:</h3>
<div className="flex flex-wrap gap-1 py-1">
<div className="bg-gray-300 animate-pulse block rounded w-40 h-8" />
<div className="flex flex-wrap gap-1 py-1 mt-2">
<div className="bg-gray-300 animate-pulse block rounded w-12 h-6" />
<div className="bg-gray-300 animate-pulse block rounded w-20 h-6" />
<div className="bg-gray-300 animate-pulse block rounded w-12 h-6" />
<div className="bg-gray-300 animate-pulse block rounded w-20 h-6" />
<div className="bg-gray-300 animate-pulse block rounded w-16 h-6" />
<div className="bg-gray-300 animate-pulse block rounded w-12 h-6" />
</div>
</div>
</div>
<div className="col-span-12 md:col-span-8">
<div className="max-w-3xl mx-auto px-4 pb-4 sm:px-6 md:px-8 mt-28">
<Article loading />
</div>
</div>
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
<h3 className="text-1xl text-primary font-semibold mb-2">Jump to:</h3>
<div className="bg-gray-300 animate-pulse block rounded w-40 h-6" />
<div className="bg-gray-300 animate-pulse block rounded w-32 h-6 mt-2" />
<div className="bg-gray-300 animate-pulse block rounded w-32 h-6 mt-2" />
<div className="bg-gray-300 animate-pulse block rounded w-32 h-6 mt-2" />
</div>
</div>
</Fragment>
);
}
25 changes: 3 additions & 22 deletions app/changelog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {Fragment, Suspense} from 'react';
import * as Sentry from '@sentry/nextjs';
import type {Metadata} from 'next';
import Image from 'next/image';
import Link from 'next/link';

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

import Header from './header';

const ENTRIES_PER_PAGE = 10;

export default async function ChangelogList({
Expand Down Expand Up @@ -124,27 +125,7 @@ export default async function ChangelogList({

return (
<Fragment>
<div className="w-full mx-auto h-96 relative bg-darkPurple">
<div className="relative w-full lg:max-w-7xl mx-auto px-4 lg:px-8 pt-8 grid grid-cols-12 items-center">
<Image
className="justify-self-center col-span-10 z-20 hidden lg:block"
src="/changelog/assets/hero.png"
alt="Sentry Changelog"
height={273}
width={450}
/>
<div className="relative col-span-12 mt-32 lg:absolute lg:w-96 lg:right-1/4 lg:-bottom-2">
<h1 className="justify-self-center text-white font-bold text-4xl text-center lg:text-left">
Sentry Changelog
</h1>
<h2 className="justify-self-center z-20 text-gold text-1xl text-center lg:text-left">
Stay up to date on everything big and small, from product updates to SDK
changes with the Sentry Changelog.
</h2>
</div>
</div>
<div className="hero-bottom-left-down-slope absolute bottom-0 w-full h-10 bg-gray-200" />
</div>
<Header loading={false} />
<div className="w-full mx-auto grid grid-cols-12 bg-gray-200">
<div className="hidden md:block md:col-span-2 pl-5 pt-10">
<h3 className="text-2xl text-primary font-semibold mb-2">Categories:</h3>
Expand Down
19 changes: 19 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,25 @@ module.exports = {
],
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 0.35s ease-in-out',
'fade-in-left': 'fadeInLeft 0.55s ease-in-out',
'fade-in-right': 'fadeInRight 0.55s ease-in-out',
},
keyframes: () => ({
fadeIn: {
'0%': {opacity: 0},
'100%': {opacity: 1},
},
fadeInLeft: {
'0%': {opacity: 0, transform: 'translateX(-20px)'},
'100%': {opacity: 1, transform: 'translateX(0)'},
},
fadeInRight: {
'0%': {opacity: 0, transform: 'translateX(20px)'},
'100%': {opacity: 1, transform: 'translateX(0)'},
},
}),
fontFamily: {
sans: [
'var(--font-rubik)',
Expand Down
Loading