\n \n \n

Loading Indicator Demo

\n\n

\n \n Custom Text\n \n setCustomText(e.target.value)}\n placeholder=\"Enter custom text\"\n />\n

\n\n

\n \n Tokens\n \n setTokens(e.target.value)}\n placeholder=\"Enter token count\"\n />\n

\n\n \n

\n\n

\n {isLoading\n ? \n : Click \"Show Loading Indicator\" to display}\n

\n );\n}",[],[210],{"_102":218,"_95":219,"_154":114,"_156":-5,"_157":139,"_158":220,"_160":116,"_104":221,"_99":185,"_163":222,"_165":223,"_166":22,"_167":-5,"_168":224,"_98":225},"40d1da3c-26d2-11f0-993e-569c3dd06744","index.tsx",48,["D",1746134492084],"http","/** @jsxImportSource https://esm.sh/react@latest */\nimport { Hono } from \"npm:hono\";\nimport { createElement } from \"npm:react\";\nimport { renderToReadableStream } from \"npm:react-dom/server\";\nimport Demo from \"./demo.tsx\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return new Response(await renderToReadableStream(createElement(Demo)), {\n headers: { \"content-type\": \"text/html\" },\n });\n});\n\n// Serve all /frontend files\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[219],{"_102":227,"_95":228,"_154":229,"_156":-5,"_157":139,"_158":230,"_160":116,"_104":231,"_99":213,"_163":176,"_165":232,"_166":22,"_167":-5,"_168":233,"_98":234},"1b4cdc8a-26d2-11f0-adfa-569c3dd06744","loader.tsx","48b47a5a-26cf-11f0-99d4-569c3dd06744",45,["D",1746134429136],"/** @jsxImportSource https://esm.sh/react@latest */\n\"use client\";\n\nimport { useEffect, useState } from \"npm:react\";\n\ninterface ClaudeCodeLoaderProps {\n /** The text to display (defaults to \"Validating...\") */\n text?: string;\n /** Initial time in milliseconds (will count up) */\n initialTimeMs?: number;\n /** Number of tokens used */\n tokens?: string;\n}\n\nexport function ClaudeCodeLoader({\n text = \"Validating...\",\n initialTimeMs = 0,\n tokens = \"0\",\n}: ClaudeCodeLoaderProps) {\n const [elapsedTime, setElapsedTime] = useState(initialTimeMs);\n const [rotation, setRotation] = useState(0);\n\n useEffect(() => {\n const timeInterval = setInterval(() => {\n setElapsedTime((prev: number): number => prev + 100);\n }, 100);\n\n const rotationInterval = setInterval(() => {\n setRotation((prev: number): number => (prev + 45) % 360);\n }, 300);\n\n return () => {\n clearInterval(timeInterval);\n clearInterval(rotationInterval);\n };\n }, []);\n\n // Format time as seconds with 1 decimal place\n const formattedTime = (elapsedTime / 1000).toFixed(1);\n\n return (\n

\n \n \n \n

\n {text}\n

\n (\n

\n {formattedTime}s\n •\n {tokens} tokens\n

)\n

\n );\n}",[],[228],"files",[151,170,181,188,198,208,217,226],"counts",{"_239":32,"_240":162,"_241":32,"_242":243},"pulls","branches","forks","envVars",{"_244":32,"_245":32},"count","emptyCount","contents",[248,251,254,257,260],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":116,"_104":249,"_99":162,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":250},["D",1746133703375],[153],{"_102":182,"_95":183,"_154":184,"_156":-5,"_157":139,"_158":185,"_160":116,"_104":252,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":253},["D",1746133615786],[183],{"_102":209,"_95":210,"_154":211,"_156":-5,"_157":139,"_158":138,"_160":116,"_104":255,"_99":213,"_163":176,"_165":214,"_166":22,"_167":-5,"_98":256},["D",1746134607279],[210],{"_102":218,"_95":219,"_154":114,"_156":-5,"_157":139,"_158":220,"_160":116,"_104":258,"_99":185,"_163":222,"_165":223,"_166":22,"_167":-5,"_98":259},["D",1746134492084],[219],{"_102":227,"_95":228,"_154":229,"_156":-5,"_157":139,"_158":230,"_160":116,"_104":261,"_99":213,"_163":176,"_165":232,"_166":22,"_167":-5,"_98":262},["D",1746134429136],[228],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":272,"_242":277},{"_102":103,"_95":96,"_104":273,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":118,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":274,"_133":275,"_136":276,"_148":22},["D",1746133203310],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[],"actionData","errors"]

matthamlin

claudeCodeLoader

Environment variables