spinner added in contetn calednar page

frontend/src/pages/Publisher/ContentCalendar.tsx

@@ -14,6 +14,7 @@ import PageMeta from '../../components/common/PageMeta';
 import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import { Card } from '../../components/ui/card';
+import { Spinner } from '../../components/ui/spinner';
 import Button from '../../components/ui/button/Button';
 import IconButton from '../../components/ui/button/IconButton';
 import { ButtonGroup, ButtonGroupItem } from '../../components/ui/button-group/ButtonGroup';
@@ -169,50 +170,36 @@ export default function ContentCalendar() {
   const loadQueue = useCallback(async () => {
     if (!activeSite?.id) return;
 
+    const siteId = activeSite.id;
+
+    const safeFetch = async (url: string) => {
+      try {
+        const response = await fetchAPI(url);
+        return response?.results || [];
+      } catch (error: any) {
+        return [];
+      }
+    };
+
     try {
       setLoading(true);
 
-      // IMPORTANT: Since content is ordered by -created_at, we need to fetch items by specific site_status
+      const [scheduledItems, failedItems, reviewItems, approvedItems, publishedItems] = await Promise.all([
-      // Otherwise old scheduled/failed items will be on later pages and won't load
+        safeFetch(`/v1/writer/content/?site_id=${siteId}&page_size=1000&site_status=scheduled`),
-      // NOTE: fetchAPI doesn't support params object - must use URL query strings
+        safeFetch(`/v1/writer/content/?site_id=${siteId}&page_size=1000&site_status=failed`),
+        safeFetch(`/v1/writer/content/?site_id=${siteId}&page_size=100&status=review`),
+        safeFetch(`/v1/writer/content/?site_id=${siteId}&page_size=100&status=approved&site_status=not_published`),
+        safeFetch(`/v1/writer/content/?site_id=${siteId}&page_size=100&site_status=published&ordering=-updated_at`),
+      ]);
 
-      const siteId = activeSite.id;
-      
-      // Fetch scheduled items (all of them, regardless of page)
-      const scheduledResponse = await fetchAPI(
-        `/v1/writer/content/?site_id=${siteId}&page_size=1000&site_status=scheduled`
-      );
-      
-      // Fetch failed items (all of them)
-      const failedResponse = await fetchAPI(
-        `/v1/writer/content/?site_id=${siteId}&page_size=1000&site_status=failed`
-      );
-      
-      // Fetch review items (for review count display)
-      const reviewResponse = await fetchAPI(
-        `/v1/writer/content/?site_id=${siteId}&page_size=100&status=review`
-      );
-      
-      // Fetch approved items (for sidebar drag-drop) - not yet published to site
-      const approvedResponse = await fetchAPI(
-        `/v1/writer/content/?site_id=${siteId}&page_size=100&status=approved&site_status=not_published`
-      );
-      
-      // Fetch published items (site_status=published) for display
-      const publishedResponse = await fetchAPI(
-        `/v1/writer/content/?site_id=${siteId}&page_size=100&site_status=published&ordering=-updated_at`
-      );
-      
-      // Combine all results, removing duplicates by ID
       const allItems = [
-        ...(scheduledResponse.results || []),
+        ...scheduledItems,
-        ...(failedResponse.results || []),
+        ...failedItems,
-        ...(reviewResponse.results || []),
+        ...reviewItems,
-        ...(approvedResponse.results || []),
+        ...approvedItems,
-        ...(publishedResponse.results || []),
+        ...publishedItems,
       ];
 
-      // Remove duplicates by ID
       const uniqueItems = Array.from(
         new Map(allItems.map(item => [item.id, item])).values()
       );
@@ -604,7 +591,14 @@ export default function ContentCalendar() {
       <div className="flex gap-6">
         {/* Main Calendar/List View */}
         <div className="flex-1">
-          {queueItems.length === 0 && approvedItems.length === 0 ? (
+          {loading ? (
+            <Card className="p-12 text-center">
+              <div className="flex flex-col items-center gap-4">
+                <Spinner size="lg" />
+                <p className="text-gray-600 dark:text-gray-400">Loading calendar...</p>
+              </div>
+            </Card>
+          ) : queueItems.length === 0 && approvedItems.length === 0 ? (
             <Card className="p-12 text-center">
               <CalendarIcon className="w-12 h-12 mx-auto text-gray-400 mb-4" />
               <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">