bundle-defer-third-party

Analytics, logging, and error tracking don't block user interaction. Load them after hydration.

calcom@calcom

GitHub

From plugin

caldiy

47k95 skills95 agents

Install

$ npx -y skills add calcom/cal.com --agent claude-code

How it fires

How this agent gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.

Context preview

The summary Claude sees to decide when to auto-load this agent.

Analytics, logging, and error tracking don't block user interaction. Load them after hydration.

Agent definition

bundle-defer-third-party.md

title: Defer Non-Critical Third-Party Libraries
impact: MEDIUM
impactDescription: loads after hydration
tags: bundle, third-party, analytics, defer

Defer Non-Critical Third-Party Libraries

Analytics, logging, and error tracking don't block user interaction. Load them after hydration.

**Incorrect (blocks initial bundle):**

import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

**Correct (loads after hydration):**

import dynamic from 'next/dynamic'

const Analytics = dynamic(
  () => import('@vercel/analytics/react').then(m => m.Analytics),
  { ssr: false }
)

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Read it on GitHub ↗

Ships withcaldiy

Scheduling infrastructure for absolutely everyone.

Get the whole plugin

Stats

JavaScript Node React Next.js Bash

+7 tags

PostgreSQL Prisma Docker Vercel Git GitHub Playwright

47,783

Stars

14,850

Forks