fix: Remove conditional rendering to always show dashboard components

Components were conditionally rendered based on data availability, causing
a blank page during loading or on API errors. Each component already has
internal loading state handling with skeleton loaders.

Changed:
- HealthStatusCard: Always render, let component show skeleton
- ActionQueueCard: Always render, let component show skeleton
- OrchestrationSummaryCard: Always render, let component show skeleton
- ProductionTimelineCard: Always render, let component show skeleton
- InsightsGrid: Always render, let component show skeleton

Benefits:
- Users see loading skeletons instead of blank page
- Better UX during initial load and API failures
- Components handle their own loading/error states
This commit is contained in:
Claude
2025-11-07 22:03:45 +00:00
parent e46574a12b
commit 1b44173933

View File

@@ -153,10 +153,9 @@ export function NewDashboardPage() {
{/* Main Dashboard Layout */} {/* Main Dashboard Layout */}
<div className="space-y-6"> <div className="space-y-6">
{/* SECTION 1: Bakery Health Status */} {/* SECTION 1: Bakery Health Status */}
{healthStatus && <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />} <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
{/* SECTION 2: What Needs Your Attention (Action Queue) */} {/* SECTION 2: What Needs Your Attention (Action Queue) */}
{actionQueue && (
<ActionQueueCard <ActionQueueCard
actionQueue={actionQueue} actionQueue={actionQueue}
loading={actionQueueLoading} loading={actionQueueLoading}
@@ -164,33 +163,26 @@ export function NewDashboardPage() {
onViewDetails={handleViewDetails} onViewDetails={handleViewDetails}
onModify={handleModify} onModify={handleModify}
/> />
)}
{/* SECTION 3: What the System Did for You (Orchestration Summary) */} {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
{orchestrationSummary && (
<OrchestrationSummaryCard <OrchestrationSummaryCard
summary={orchestrationSummary} summary={orchestrationSummary}
loading={orchestrationLoading} loading={orchestrationLoading}
/> />
)}
{/* SECTION 4: Today's Production Timeline */} {/* SECTION 4: Today's Production Timeline */}
{productionTimeline && (
<ProductionTimelineCard <ProductionTimelineCard
timeline={productionTimeline} timeline={productionTimeline}
loading={timelineLoading} loading={timelineLoading}
onStart={handleStartBatch} onStart={handleStartBatch}
onPause={handlePauseBatch} onPause={handlePauseBatch}
/> />
)}
{/* SECTION 5: Quick Insights Grid */} {/* SECTION 5: Quick Insights Grid */}
{insights && (
<div> <div>
<h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Key Metrics</h2> <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Key Metrics</h2>
<InsightsGrid insights={insights} loading={insightsLoading} /> <InsightsGrid insights={insights} loading={insightsLoading} />
</div> </div>
)}
{/* SECTION 6: Quick Action Links */} {/* SECTION 6: Quick Action Links */}
<div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}> <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>