add container

dashboard_js/app/components/container.jsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx'
+
+export function Container({ children, className }) {
+  return (
+    <div
+      className={clsx(
+        'group-[.is-minimized]:lg:w-10/12',
+        'group-[.is-minimized]:xl:w-8/12',
+        'group-[.is-minimized]:2xl:w-6/12',
+        'xl:w-4/6 2xl:w-3/5',
+        'mx-auto',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

dashboard_js/app/components/form.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext, useId } from 'react'
+import React, { createElement, forwardRef, useContext, useId } from 'react'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import { omit } from 'ramda'
 import { Loader } from './loader'
@@ -42,7 +42,7 @@ export function Button({
     props['disabled'] = isLoading
   }
 
-  return React.createElement(
+  return createElement(
     as,
     {
       className: clsx(
@@ -90,15 +90,13 @@ export const Input = forwardRef(function Input(
   const { className: _, ...field } = useControl(props)
   const sizes = { base: 'h-12' }
 
-  return React.createElement(
+  return createElement(
     as,
     {
       className: clsx(
         'bg-white outline-none px-4 rounded-lg transition',
         'border border-green-light dark:border-gray-700 dark:bg-gray-800',
         'focus:ring-1 focus:border-green-secondary focus:ring-green-secondary focus:placeholder:text-transparent',
-        // Tailwind's won't inherit focus behavior; you must define it explicitly for both modes.
-        'dark:focus:border-green-secondary',
         'aria-[invalid=true]:border-red-400 aria-[invalid=true]:ring-red-400',
         'dark:aria-[invalid=true]:border-red-500 dark:aria-[invalid=true]:ring-red-500',
         'disabled:text-gray-400 disabled:border-gray-300 disabled:bg-gray-200',
@@ -123,10 +121,10 @@ export const Checkbox = forwardRef(function Checkbox(
     <input
       type="checkbox"
       className={clsx(
-        'text-green-secondary border border-gray-300',
-        'focus:ring-2 focus:border-green-secondary focus:ring-green-secondary focus:ring-offset-0  focus:ring-opacity-30',
-        'dark:border-gray-700 dark:bg-gray-800 focus:dark:border-security dark:checked:bg-green-secondary dark:checked:border-security dark:disabled:bg-gray-700',
-        'disabled:bg-gray-200 outline-none rounded transition',
+        // 'text-green-secondary border border-gray-300',
+        // 'focus:ring-2 focus:border-green-secondary focus:ring-green-secondary focus:ring-offset-0 focus:ring-opacity-30',
+        // 'dark:border-gray-700 dark:bg-gray-800 focus:dark:border-security dark:checked:bg-green-secondary dark:checked:border-security dark:disabled:bg-gray-700',
+        // 'disabled:bg-gray-200 outline-none rounded transition',
         className,
       )}
       ref={ref}

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