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