skeleton, html cache

Author: breardon2011

ui/src/components/LoadingSkeleton.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-4 w-96 mt-2" />
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {Array.from({ length: rows }).map((_, i) => (
+            <div key={i} className="flex gap-4">
+              <Skeleton className="h-12 w-full" />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function DetailsSkeleton() {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-4 w-96 mt-2" />
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className="h-16 w-full" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-24 w-full" />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function PageLoading() {
+  return (
+    <div className="container mx-auto p-4">
+      <Skeleton className="h-10 w-32 mb-6" />
+      <TableSkeleton />
+    </div>
+  )
+}
+

ui/src/routes/__root.tsx

@@ -1,14 +1,10 @@
 import radixCssUrl from '@radix-ui/themes/styles.css?url';
 import workosWidgetsCssUrl from '@workos-inc/widgets/styles.css?url';
-import { HeadContent, Link, Outlet, Scripts, createRootRoute } from '@tanstack/react-router';
+import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 import { Suspense } from 'react';
-import { getAuth, getOrganisationDetails, getSignInUrl, signOut } from '@/authkit/serverFunctions';
-import Footer from '@/components/footer';
-import SignInButton from '@/components/sign-in-button';
+import { getAuth, getOrganisationDetails, getSignInUrl } from '@/authkit/serverFunctions';
 import type { ReactNode } from 'react';
-import { Sidebar, SidebarMenuButton, SidebarGroupContent, SidebarGroupLabel, SidebarGroup, SidebarContent, SidebarHeader, SidebarTrigger, SidebarProvider, SidebarMenu, SidebarMenuItem } from '../components/ui/sidebar';
-import { GitBranch, Folders, Waves, Settings, CreditCard, LogOut } from 'lucide-react';
 import globalCssUrl from '@/styles/global.css?url'
 import { Toaster } from '@/components/ui/toaster';
 import { getPublicServerConfig, type Env } from '@/lib/env.server';

ui/src/routes/_authenticated/_dashboard/dashboard/drift.tsx

@@ -12,12 +12,14 @@ import { useToast } from '@/hooks/use-toast'
 import { getOrgSettingsFn, updateOrgSettingsFn } from '@/api/orchestrator_serverFunctions'
 import { testSlackWebhookFn } from '@/api/drift_serverFunctions'
 import { ToastAction } from '@/components/ui/toast'
+import { PageLoading } from '@/components/LoadingSkeleton'
 
 
 export const Route = createFileRoute(
   '/_authenticated/_dashboard/dashboard/drift',
 )({
   component: RouteComponent,
+  pendingComponent: PageLoading,
   loader: async ({ context }) => {
     const { user, organisationId } = context;
     const settings = await getOrgSettingsFn({data: {userId: user?.id || '', organisationId: organisationId || ''}})

ui/src/routes/_authenticated/_dashboard/dashboard/projects.$projectid.tsx

@@ -4,6 +4,7 @@ import { createFileRoute, useLoaderData, Link } from '@tanstack/react-router'
 import { AlertTriangle, CheckCircle, Clock, FolderOpen, GitBranch, Calendar, ArrowLeft } from 'lucide-react'
 import { getProjectFn } from '@/api/orchestrator_serverFunctions'
 import { Button } from '@/components/ui/button'
+import { DetailsSkeleton } from '@/components/LoadingSkeleton'
 
 const getDriftStatusBadge = (status: string) => {
   switch (status?.toLowerCase()) {
@@ -37,6 +38,12 @@ export const Route = createFileRoute(
   '/_authenticated/_dashboard/dashboard/projects/$projectid',
 )({
   component: RouteComponent,
+  pendingComponent: () => (
+    <div className="container mx-auto p-4">
+      <div className="mb-6"><div className="h-10 w-32" /></div>
+      <DetailsSkeleton />
+    </div>
+  ),
   loader: async ({ context, params: {projectid} }) => {
     const { user, organisationId } = context;
     const project = await getProjectFn({data: {projectId: projectid, organisationId, userId: user?.id || ''}})

ui/src/routes/_authenticated/_dashboard/dashboard/projects.index.tsx

@@ -8,12 +8,14 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Button } from '@/components/ui/button'
 import { ArrowLeft, ExternalLink } from 'lucide-react'
+import { PageLoading } from '@/components/LoadingSkeleton'
 
 
 export const Route = createFileRoute(
   '/_authenticated/_dashboard/dashboard/projects/',
 )({
   component: RouteComponent,
+  pendingComponent: PageLoading,
   loader: async ({ context }) => {
     const { user, organisationId } = context;
     try {

ui/src/routes/_authenticated/_dashboard/dashboard/repos.$repoId.tsx

@@ -5,9 +5,11 @@ import { Button } from '@/components/ui/button'
 import { ArrowLeft } from 'lucide-react'
 import JobsTable from '@/components/dashboard/JobsTable'
 import { getRepoDetailsFn } from '@/api/orchestrator_serverFunctions'
+import { PageLoading } from '@/components/LoadingSkeleton'
 
 export const Route = createFileRoute('/_authenticated/_dashboard/dashboard/repos/$repoId')({
   component: RouteComponent,
+  pendingComponent: PageLoading,
   loader: async ({ params: {repoId}, context }) => {
     const { user, organisationId } = context;
     const { repo, allJobs } = await getRepoDetailsFn({data: {repoId, organisationId, userId: user?.id || ''}})

ui/src/routes/_authenticated/_dashboard/dashboard/repos.index.tsx

@@ -5,10 +5,12 @@ import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
 import { ArrowLeft, Github, Gitlab, GithubIcon as Bitbucket, ExternalLink, PlusCircle } from "lucide-react"
 import { getReposFn } from '@/api/orchestrator_serverFunctions'
 import { Repo } from '@/api/orchestrator_types'
+import { PageLoading } from '@/components/LoadingSkeleton'
 
 
 export const Route = createFileRoute('/_authenticated/_dashboard/dashboard/repos/')({
   component: RouteComponent,
+  pendingComponent: PageLoading,
   loader: async ({ context }) => {
     const { user, organisationId } = context;
     const repos = await getReposFn({data: {organisationId, userId: user?.id || ''}})

ui/src/routes/_authenticated/_dashboard/dashboard/units.$unitId.tsx

@@ -28,6 +28,7 @@ import { toast } from '@/hooks/use-toast'
 import { getUnitFn, getUnitVersionsFn, lockUnitFn, unlockUnitFn, getUnitStatusFn, deleteUnitFn, downloadLatestStateFn, restoreUnitStateVersionFn } from '@/api/statesman_serverFunctions'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { getPublicServerConfig } from '@/lib/env.server'
+import { DetailsSkeleton } from '@/components/LoadingSkeleton'
 import type { Env } from '@/lib/env.server'
 import { downloadJson } from '@/lib/io'
 
@@ -75,6 +76,12 @@ export const Route = createFileRoute(
   '/_authenticated/_dashboard/dashboard/units/$unitId',
 )({
   component: RouteComponent,
+  pendingComponent: () => (
+    <div className="container mx-auto p-4">
+      <div className="mb-6"><div className="h-10 w-32" /></div>
+      <DetailsSkeleton />
+    </div>
+  ),
   loader: async ({ context, params: {unitId} }) => {
     const { user, organisationId, organisationName } = context;
 

ui/src/routes/_authenticated/_dashboard/dashboard/units.index.tsx

@@ -23,11 +23,13 @@ import {
 import { useState } from "react"
 import UnitCreateForm from "@/components/UnitCreateForm"
 import { listUnitsFn } from '@/api/statesman_serverFunctions'
+import { PageLoading } from '@/components/LoadingSkeleton'
 
 export const Route = createFileRoute(
   '/_authenticated/_dashboard/dashboard/units/',
 )({
   component: RouteComponent,
+  pendingComponent: PageLoading,
   loader: async ({ context }) => {
     const { user, organisationId } = context;
     const unitsData = await listUnitsFn({data: {organisationId: organisationId || '', userId: user?.id || '', email: user?.email || ''}})