Danvas
Danvas
DashboardSupportWelcome

👤 USER DOCS

User Guides

Getting Started

Getting StartedDashboard & OnboardingApp Settings

Tutorials

Tutorial: Setting Up Shift Tasks & ClosersTutorial: Managing Incidents in the InboxTutorial: Tracking Compliance & Sync StatusTutorial: Operational Workflows with the AI AssistantTutorial: Building & Deploying Custom Checklists

Daily Operations (Staff)

Shift Workspace & TasksService Day SetupDaily Line-UpStaff Service Day ReportsForms

Communication & Chat

Messages & AnnouncementsUnified Operations InboxAI Assistant

Manager & Admin Guides

Daily Line-Up SetupStaff SchedulingManaging LocationsNPS and Guest FeedbackCouponsContacts and Guest HistoryManager CloseoutsDaily Line-Up & ComplianceAnalyticsIncident ReportingWhistleblower Concerns & FeedbackAdmin Tools

⚙️ DEVELOPER DOCS

Getting Started

Getting StartedDevelopmentDeployment Guide

Architecture

Architecture OverviewExplanation: AI Integration & Tenant SecurityExplanation: Dynamic Forms Engine DesignExplanation: Compliance Ledger DesignExplanation: Live Sync & Data FreshnessData FlowArchitecture Decision Records

Core Domain

Core DomainDatabase ReferenceLocations DomainAuth & RBACScheduling DomainReports DomainIncidents DomainUnified Operations InboxLive Sync Data FreshnessToast Sync PipelineNotifications DomainCoupons and Guest NPSAudit Log & Compliance ArchitectureDesign Audit FindingsAI Chat IntegrationAnalytics & Tips Integration

Frontend

Frontend ArchitectureFormsLoading SkeletonsComponentsPWA & Offline ShellScreenshots

API Reference

API Reference

Endpoints

POS Sales APIOptimization Data APISchedule Shifts APIEmployee Export APIReports APIIncidents APIAI Chat APIPush Notifications APIWebhooks APICron API

Contributing

ContributingCode Examples

Security

Security & Compliance

Release Notes

What's New

Loading Skeletons

Architecture pattern for loading states and skeleton components

Overview

Danvas uses granular Suspense boundaries and design-system skeleton primitives to keep page shells responsive while data loads. This page is the published developer view.

Canonical source: Loading Skeleton Engineering Standard. The repository standard owns the complete implementation recipe and review policy.

Recommended pattern

  • Use route-level loading.tsx for a whole-route transition when replacing the full page is appropriate.
  • Use granular React <Suspense> boundaries when menus, headers, actions, or other shell controls should remain interactive.
  • Keep each data component's fallback in a separate colocated skeleton file.
  • Use primitives from @repo/design-system/components/ui/skeleton instead of hand-built placeholders with magic dimensions.

Available primitives

The design system exports SkeletonText, SkeletonAvatar, SkeletonButton, and SkeletonBadge. Check the canonical standard and the component source for current props and dimensions.

Implementation

Follow the canonical engineering standard for the Suspense, Server Component, and skeleton examples.

Related

Frontend Architecture

Form Patterns

Forms

Build and submit dynamic forms per location

Components

Custom components built on top of the design system

On this page

OverviewRecommended patternAvailable primitivesImplementationRelated