Dynamically import ChatDetail, NewChatForm, and ProductSelector components with skeleton loading states for improved performance. Refine product selection logic in promotion forms to show blacklist selector only for 'all' mode and clarify labels and descriptions for better user understanding.
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { Metadata } from "next";
|
|
import dynamic from "next/dynamic";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import Dashboard from "@/components/dashboard/dashboard";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Chat Conversation",
|
|
description: "View and respond to customer messages",
|
|
};
|
|
|
|
interface PageProps {
|
|
params: Promise<{
|
|
id: string;
|
|
}>;
|
|
}
|
|
|
|
export default async function ChatDetailPage({ params }: PageProps) {
|
|
const { id } = await params;
|
|
const ChatDetail = dynamic(() => import("@/components/dashboard/ChatDetail"), {
|
|
loading: () => (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<Skeleton className="h-6 w-48" />
|
|
<div className="flex gap-2">
|
|
<Skeleton className="h-9 w-24" />
|
|
<Skeleton className="h-9 w-24" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="h-24 w-full" />
|
|
<Skeleton className="h-96 w-full" />
|
|
</div>
|
|
)
|
|
});
|
|
return (
|
|
<Dashboard>
|
|
<ChatDetail chatId={id} />
|
|
</Dashboard>
|
|
);
|
|
}
|