"use client";
import { useState } from "react";
// Loading skeleton components for Communications page
function SkeletonBlock({ className = "" }: { className?: string }) {
return (
);
}
function SkeletonCard() {
return (
{[1, 2, 3, 4].map((i) => (
))}
);
}
function SkeletonTableRow() {
return (
);
}
function SkeletonTable({ rows = 5 }: { rows?: number }) {
return (
{Array.from({ length: rows }).map((_, i) => (
))}
);
}
function SkeletonComposer() {
return (
{/* Step indicator skeleton */}
{[1, 2, 3, 4].map((i) => (
{i < 4 && }
))}
{/* Main card skeleton */}
{[1, 2, 3, 4].map((i) => (
))}
{/* Recent campaigns skeleton */}
);
}
function SkeletonSegmentBuilder() {
return (
{/* Sidebar skeleton */}
{[1, 2, 3].map((i) => (
))}
{/* Builder + Preview skeleton */}
{[1, 2, 3].map((i) => (
))}
);
}
function SkeletonContacts() {
return (
{[1, 2, 3].map((i) => (
))}
);
}
function SkeletonLogs() {
return (
);
}
// Main loading component that shows skeleton based on current tab
export default function CommunicationsLoading({
activeTab = "campaigns"
}: {
activeTab?: string
}) {
const [currentTab] = useState(activeTab);
switch (currentTab) {
case "campaigns":
return ;
case "templates":
return ;
case "contacts":
return ;
case "segments":
return ;
case "logs":
return ;
case "analytics":
return ;
default:
return ;
}
}
// Named exports for specific loading states
export {
SkeletonCard,
SkeletonComposer,
SkeletonSegmentBuilder,
SkeletonContacts,
SkeletonLogs,
SkeletonTable,
SkeletonBlock,
};