fix(api): warm compliance caches when starting the worker (#11530)

ui/CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🔄 Changed
 
 - Renamed "Customer Support" to "Support Desk" in the side menu, showing it only in Prowler Cloud/Enterprise, while "Community Support" now shows only in Prowler OSS [(#11508)](https://github.com/prowler-cloud/prowler/pull/11508)
+- Compliance detail page now shows a "still loading" retry state while the API warms its compliance catalog, instead of rendering an empty page [(#4554)](https://github.com/prowler-cloud/prowler-cloud/pull/4554)
 
 ---
 

ui/actions/compliances/compliances.ts

@@ -84,6 +84,13 @@ export const getComplianceAttributes = async (complianceId: string) => {
       headers,
     });
 
+    // The compliance catalog is still warming after a deploy/restart. Signal
+    // the page to render the "still loading" state instead of letting this
+    // become a thrown 5xx (which would be captured as a server error).
+    if (response.status === 503) {
+      return { warming: true as const, status: 503 };
+    }
+
     return handleApiResponse(response);
   } catch (error) {
     console.error("Error fetching compliance attributes:", error);

ui/app/(prowler)/compliance/[compliancetitle]/page.tsx

@@ -13,6 +13,7 @@ import {
   ClientAccordionWrapper,
   ComplianceDownloadContainer,
   ComplianceHeader,
+  ComplianceWarming,
   RequirementsStatusCard,
   RequirementsStatusCardSkeleton,
   // SectionsFailureRateCard,
@@ -92,6 +93,16 @@ export default async function ComplianceDetail({
         : Promise.resolve(null),
     ]);
 
+  // The compliance catalog is still warming after a deploy/restart. Show the
+  // "still loading" state with a Try Again instead of rendering an empty page.
+  if (attributesData?.warming) {
+    return (
+      <ContentLayout title={pageTitle}>
+        <ComplianceWarming />
+      </ContentLayout>
+    );
+  }
+
   if (selectedScanResponse?.data) {
     const scan = selectedScanResponse.data;
     const providerId = scan.relationships?.provider?.data?.id;

ui/components/compliance/compliance-warming.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/shadcn/button/button";
+import { Card, CardContent } from "@/components/shadcn/card/card";
+
+export const ComplianceWarming = () => {
+  const router = useRouter();
+
+  return (
+    <div className="flex h-full min-h-[calc(100vh-56px)] items-center justify-center">
+      <div className="mx-auto w-full max-w-2xl">
+        <Card variant="base" padding="lg">
+          <CardContent>
+            <div className="flex w-full items-center justify-between gap-6">
+              <div className="flex items-start gap-4">
+                <Icon
+                  icon="tabler:clock"
+                  className="mt-1 h-5 w-5 text-gray-400 dark:text-gray-300"
+                />
+                <div>
+                  <h2 className="mb-1 text-base font-medium text-gray-900 dark:text-white">
+                    Compliance data is still loading
+                  </h2>
+                  <p className="text-sm text-gray-500 dark:text-gray-300">
+                    This can happen for a few seconds right after an update.
+                    Please try again shortly.
+                  </p>
+                </div>
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                className="shrink-0 gap-2"
+                onClick={() => router.refresh()}
+                aria-label="Reload compliance data"
+              >
+                <Icon icon="tabler:refresh" className="h-4 w-4" />
+                Try Again
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};

ui/components/compliance/index.ts

@@ -19,6 +19,7 @@ export * from "./compliance-header/compliance-scan-info";
 export * from "./compliance-header/data-compliance";
 export * from "./compliance-header/scan-selector";
 export * from "./compliance-overview-grid";
+export * from "./compliance-warming";
 export * from "./no-scans-available";
 export * from "./skeletons/bar-chart-skeleton";
 export * from "./skeletons/compliance-accordion-skeleton";