38bb40b88b
- Introduced new controllers for internet eligibility and service health checks to enhance backend functionality. - Created service modules for internet, SIM, and VPN offerings, improving organization and maintainability. - Developed various components for internet and SIM configuration, including forms and plan cards, to streamline user interactions. - Implemented hooks for managing service configurations and eligibility checks, enhancing frontend data handling. - Updated utility functions for pricing and catalog operations to support new service structures and improve performance.
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { RouteLoading } from "@/components/molecules/RouteLoading";
|
|
import { Server } from "lucide-react";
|
|
import { Skeleton } from "@/components/atoms/loading-skeleton";
|
|
|
|
export default function AccountServicesLoading() {
|
|
return (
|
|
<RouteLoading
|
|
icon={<Server />}
|
|
title="Services"
|
|
description="View and manage your services"
|
|
mode="content"
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<div key={i} className="bg-card rounded-xl border border-border p-5 shadow-sm">
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-10 w-10 rounded-lg" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-6 w-12" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Search and Table */}
|
|
<div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-border">
|
|
<Skeleton className="h-10 w-full max-w-md rounded-lg" />
|
|
</div>
|
|
<div className="p-0">
|
|
{/* Custom Table Skeleton to match embedded style */}
|
|
<div className="w-full">
|
|
<div className="border-b border-border p-4">
|
|
<div className="grid grid-cols-5 gap-4">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-4 w-20" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="divide-y divide-border">
|
|
{Array.from({ length: 5 }).map((_, rowIndex) => (
|
|
<div key={rowIndex} className="p-4">
|
|
<div className="grid grid-cols-5 gap-4">
|
|
{Array.from({ length: 5 }).map((_, colIndex) => (
|
|
<Skeleton key={colIndex} className="h-4 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</RouteLoading>
|
|
);
|
|
}
|