bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Remove conditional rendering to always show dashboard components

Browse Source 
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
1 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/pages/app/DashboardPage.tsx
View File

@@ -153,44 +153,36 @@ 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} onApprove={handleApprove}
onApprove={handleApprove} 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)' }}>