loading for admin

Author: HazAT

app/changelog/%5Fadmin/loading.tsx

@@ -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>
+  );
+}

app/changelog/%5Fadmin/page.tsx

@@ -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>