add container

dashboard_js/app/layouts/app.jsx

@@ -3,6 +3,7 @@ import { fetchAuthSession } from 'aws-amplify/auth'
 import { Link } from 'react-router'
 import { Outlet } from 'react-router'
 import { useAuth } from '~/hooks/use-auth'
+import { Container } from '~/components/container'
 
 export async function clientLoader() {
   const session = await fetchAuthSession()
@@ -43,7 +44,26 @@ export default function Layout() {
         </button>
       </nav>
 
-      {isNavigating ? <>Loading...</> : <Outlet />}
+      {isNavigating ? <Loading /> : <Outlet />}
     </>
   )
 }
+
+function Loading() {
+  return (
+    <Container>
+      <div className="animate-pulse flex flex-col gap-2.5 lg:w-2/4 [&>*]:bg-gray-200 dark:[&>*]:bg-gray-700 [&>*]:h-5 [&>*]:rounded-md">
+        <div className="w-2/6" />
+        <div className="w-4/6" />
+        <div className="w-5/6" />
+        <div className="w-5/6" />
+        <div className="w-6/6" />
+        <div className="w-6/6" />
+        <div className="w-3/6" />
+        <div className="w-5/6" />
+        <div className="w-4/6" />
+        <div className="w-4/6" />
+      </div>
+    </Container>
+  )
+}