Remix Loader and Action Patterns

# Remix Loader and Action Patterns for Google Antigravity IDE

Master Remix's data loading and mutation patterns with Google Antigravity IDE's Gemini 3 assistance. This guide covers advanced loader/action patterns, optimistic UI, error handling, and real-time data synchronization for building robust full-stack applications.

## Advanced Loader Patterns

```typescript
// app/routes/dashboard.tsx
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json, defer } from "@remix-run/node";
import { useLoaderData, Await } from "@remix-run/react";
import { Suspense } from "react";
import { requireUser } from "~/services/auth.server";
import { getAnalytics, getRecentActivity, getNotifications } from "~/services/dashboard.server";

// Parallel data loading with streaming
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await requireUser(request);
  
  // Critical data loads immediately
  const analytics = await getAnalytics(user.id);
  
  // Non-critical data streams in
  const recentActivityPromise = getRecentActivity(user.id);
  const notificationsPromise = getNotifications(user.id);

  return defer({
    user,
    analytics,
    recentActivity: recentActivityPromise,
    notifications: notificationsPromise,
  });
}

export default function Dashboard() {
  const { user, analytics, recentActivity, notifications } = useLoaderData<typeof loader>();

  return (
    <div className="dashboard">
      <WelcomeHeader user={user} />
      <AnalyticsCards data={analytics} />
      
      <Suspense fallback={<ActivitySkeleton />}>
        <Await resolve={recentActivity}>
          {(activity) => <RecentActivity items={activity} />}
        </Await>
      </Suspense>

      <Suspense fallback={<NotificationsSkeleton />}>
        <Await resolve={notifications} errorElement={<NotificationsError />}>
          {(notifs) => <NotificationPanel notifications={notifs} />}
        </Await>
      </Suspense>
    </div>
  );
}
```

## Optimistic UI Actions

```typescript
// app/routes/tasks.$taskId.tsx
import type { ActionFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
import { updateTask, deleteTask } from "~/services/tasks.server";

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");
  const taskId = params.taskId!;

  switch (intent) {
    case "update": {
      const title = formData.get("title") as string;
      const completed = formData.get("completed") === "true";
      const task = await updateTask(taskId, { title, completed });
      return json({ task });
    }
    case "delete": {
      await deleteTask(taskId);
      return json({ deleted: true });
    }
    default:
      throw new Response("Invalid intent", { status: 400 });
  }
}

function TaskItem({ task }: { task: Task }) {
  const fetcher = useFetcher<typeof action>();
  
  // Optimistic UI - show pending state immediately
  const isDeleting = fetcher.formData?.get("intent") === "delete";
  const optimisticCompleted = fetcher.formData?.has("completed")
    ? fetcher.formData.get("completed") === "true"
    : task.completed;

  if (isDeleting) return null;

  return (
    <fetcher.Form method="post" className="task-item">
      <input type="hidden" name="intent" value="update" />
      <input
        type="checkbox"
        name="completed"
        value={(!optimisticCompleted).toString()}
        checked={optimisticCompleted}
        onChange={(e) => e.currentTarget.form?.requestSubmit()}
      />
      <span className={optimisticCompleted ? "completed" : ""}>
        {task.title}
      </span>
      <button type="submit" name="intent" value="delete">
        Delete
      </button>
    </fetcher.Form>
  );
}
```

## Best Practices for Google Antigravity IDE

When building Remix applications with Google Antigravity, use defer for non-critical data to improve initial page load. Implement optimistic UI for instant feedback on mutations. Handle errors at the route level with ErrorBoundary. Use resource routes for API endpoints. Leverage nested routing for shared layouts and data. Let Gemini 3 generate type-safe loader and action functions based on your data models.

Google Antigravity's agent mode can scaffold entire Remix routes with proper data loading, mutations, and error handling.