r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 19:25:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added loading animation to dashboard

Browse Source
This commit is contained in:
Ryan Freeman 2023-07-30 20:23:33 +01:00
parent b00e33a95a
commit 588ec25403
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/dashboard/loading.tsx
View File

@ -1,12 +1,13 @@
import {metadata} from './page' import {metadata} from './page'
import {SimpleLayout} from '@/components/layouts/SimpleLayout' import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {SpinnerIcon} from '@/components/icons/SpinnerIcon'
export default function LoadingSkeleton() { export default function LoadingSkeleton() {
return ( return (
<SimpleLayout heading="Dashboard." <SimpleLayout heading="Dashboard."
description={metadata.description} description={metadata.description}
gradient="bg-gradient-to-r from-orange-300 to-rose-300"> gradient="bg-gradient-to-r from-orange-300 to-rose-300">
<SpinnerIcon className="animate-spin w-8 h-8 text-indigo-400"/>
</SimpleLayout> </SimpleLayout>
) )
} }

12
components/icons/SpinnerIcon.tsx Normal file
View File

@ -0,0 +1,12 @@
import {Props} from '@/types'
export function SpinnerIcon(props: Props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" {...props}>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
)
}