feat: add deployment loader animation (#841)

## Summary

- Adds a new `Loader` class that displays a rotating square animation
during deployments
- Integrates the loader into the Gram Functions deployment process to
provide visual feedback

## Implementation Details

The `Loader` class provides a clean terminal animation using rotating
square characters (◰ ◳ ◲ ◱) that displays while the `gram push` command
is running. This improves the user experience by providing visual
feedback during the deployment process.

<img width="458" height="192" alt="CleanShot 2025-11-13 at 08 11 05@2x"
src="https://github.com/user-attachments/assets/5aaee871-867a-4e76-8a44-841eaeef1db8"
/>

## Test plan

- [x] Deploy a function and verify the loader animation displays
correctly
- [x] Verify the loader clears properly after deployment completes
- [x] Test that deployment errors still show correctly with the loader

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude <[email protected]>

Author: simplesagar

.changeset/clean-suits-flow.md

@@ -0,0 +1,5 @@
+---
+"@gram-ai/functions": patch
+---
+
+Deployment loader animation shown during `npm run push` while deployment asset is being uploaded. 

pnpm-lock.yaml

@@ -55,6 +55,7 @@
     }
   },
   "dependencies": {
+    "@clack/prompts": "^0.11.0",
     "@logtape/logtape": "^1.1.1",
     "@logtape/pretty": "^1.1.1",
     "@stricli/core": "^1.2.4",

ts-framework/functions/package.json

@@ -6,6 +6,7 @@ import { dirname, join, relative, resolve } from "node:path";
 import { createInterface } from "node:readline";
 import { $, ProcessPromise, chalk } from "zx";
 import { isCI, type ParsedUserConfig } from "./config.ts";
+import { Loader } from "./loader.ts";
 
 type Artifacts = {
   funcFilename: string;
@@ -178,6 +179,11 @@ export async function deployFunction(logger: Logger, config: ParsedUserConfig) {
   }
 
   logger.info("Deploying function with Gram CLI");
+
+  // Start the loader animation
+  const loader = new Loader("deploying function...");
+  loader.start();
+
   const pushcmd = $({
     stdio: ["pipe", "pipe", "pipe"],
   })`gram ${pushArgs}`
@@ -188,6 +194,9 @@ export async function deployFunction(logger: Logger, config: ParsedUserConfig) {
 
   const result = await pushcmd;
 
+  // Stop the loader animation
+  loader.stop();
+
   if (result.exitCode !== 0) {
     throw new Error(
       `Gram CLI push command failed with exit code ${result.exitCode}`,

ts-framework/functions/src/build/gram.ts

@@ -0,0 +1,36 @@
+import { spinner } from "@clack/prompts";
+
+/**
+ * Loader wrapper using Clack's spinner, which gracefully handles non-interactive terminals.
+ * In CI/CD environments, it falls back to simple text output instead of animations.
+ */
+export class Loader {
+  private spinnerInstance: ReturnType<typeof spinner> | null = null;
+  private readonly message: string;
+
+  constructor(message: string) {
+    this.message = message;
+  }
+
+  /**
+   * Start the loader animation.
+   */
+  start(): void {
+    if (this.spinnerInstance) {
+      return; // Already running
+    }
+
+    this.spinnerInstance = spinner();
+    this.spinnerInstance.start(this.message);
+  }
+
+  /**
+   * Stop the loader animation and clear the line.
+   */
+  stop(): void {
+    if (this.spinnerInstance) {
+      this.spinnerInstance.stop();
+      this.spinnerInstance = null;
+    }
+  }
+}