Files
ember-market-frontend/app/dashboard/chats/[id]/page.tsx
NotII e2db2d5027 Optimize form loading and update product selection UI
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.
2025-08-08 16:14:41 +01:00

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