fix: improve empty state when no event types are configured

[Vibgitcode27]

What does this PR do?

This PR makes a small UI improvement to the empty state so it looks cleaner.
It’s not a major issue, but I thought it might be worth improving.

If you feel this change isn’t necessary, please feel free to close this PR.

• Fixes Empty booking page looks weird when no event types are set up #24397
• Fixes CAL-6556

Image Demo (if applicable):

Before fix:

After fix:

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

Checklist

• I have read the contributing guide
• My code does follow the style guidelines of this project
• I have commented my code, particularly in hard-to-understand areas
• I have checked if my changes generate no new warnings

[vercel]

@Vibgitcode27 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Replaced the skeleton placeholder UI in packages/features/eventtypes/components/EmptyPage.tsx with a concrete empty-state component. Removed SkeletonEventType and its stacked layout. Added a bordered, centered container rendering an Icon (calendar), a localized header, and a descriptive paragraph. Introduced import of Icon from @calcom/ui/components/icon and useLocale for translations. Changed the component to a default export function: EmptyPage({ name }: { name: string }). Updated rendering to a single self-contained UI block instead of multiple skeleton elements.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the main change by stating that the empty state for when no event types are configured is improved, directly aligning with the code modifications that enhance the UI appearance in that scenario.
Linked Issues Check	✅ Passed	The updates implement a visually enhanced empty state by replacing the previous skeleton with a styled card containing an icon and descriptive text, directly fulfilling the linked issues’ objective to make the booking page look cleaner when no event types are configured.
Out of Scope Changes Check	✅ Passed	All modifications are confined to the EmptyPage component for the empty event types state and directly address the specified objectives, with no unrelated or extraneous code changes present.
Description Check	✅ Passed	The description clearly relates to the changeset by describing the UI improvement to the empty state with before and after screenshots and references to the fixed issues, making it obviously on-topic and relevant.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3bcce02 and 1ab4a30.

📒 Files selected for processing (1)

• packages/features/eventtypes/components/EmptyPage.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

• packages/features/eventtypes/components/EmptyPage.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

• packages/features/eventtypes/components/EmptyPage.tsx

**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

• packages/features/eventtypes/components/EmptyPage.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: supalarry
PR: calcom/cal.com#23364
File: apps/api/v2/src/ee/event-types/event-types_2024_06_14/transformers/internal-to-api/internal-to-api.spec.ts:295-296
Timestamp: 2025-08-27T13:32:46.887Z
Learning: In calcom/cal.com, when transforming booking fields from internal to API format, tests in organizations-event-types.e2e-spec.ts already expect name field label and placeholder to be empty strings ("") rather than undefined. PR changes that set these to explicit empty strings are typically fixing implementation to match existing test expectations rather than breaking changes.

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Install dependencies / Yarn install & cache
• GitHub Check: Codacy Static Code Analysis

🔇 Additional comments (1)

packages/features/eventtypes/components/EmptyPage.tsx (1)

7-16: Clean empty state implementation

Nicely distilled layout; localized copy and concise styling make the empty state feel polished.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

needs confirmation first

[github-actions]

E2E results are ready!

• Workflow #82814.1 latest results