improve homepage performance

.changeset/loud-lies-double.md

@@ -0,0 +1,5 @@
+---
+"jsrepo": patch
+---
+
+api: Export type definitions for individual provider states.

packages/cli/package.json

@@ -15,16 +15,7 @@
 	"bugs": {
 		"url": "https://github.com/ieedan/jsrepo/issues"
 	},
-	"keywords": [
-		"repo",
-		"cli",
-		"svelte",
-		"vue",
-		"typescript",
-		"javascript",
-		"shadcn",
-		"registry"
-	],
+	"keywords": ["repo", "cli", "svelte", "vue", "typescript", "javascript", "shadcn", "registry"],
 	"type": "module",
 	"exports": {
 		".": {
@@ -34,10 +25,7 @@
 	},
 	"bin": "./dist/index.js",
 	"main": "./dist/index.js",
-	"files": [
-		"./schemas/**/*",
-		"dist/**/*"
-	],
+	"files": ["./schemas/**/*", "dist/**/*"],
 	"scripts": {
 		"start": "tsup --silent && node ./dist/index.js",
 		"build": "tsup",

packages/cli/src/utils/registry-providers/index.ts

@@ -2,10 +2,10 @@ import { MANIFEST_FILE } from '../../constants';
 import type { Manifest } from '../../types';
 import { Err, Ok, type Result } from '../blocks/ts/result';
 import { parseManifest } from '../manifest';
-import { azure } from './azure';
-import { bitbucket } from './bitbucket';
-import { github } from './github';
-import { gitlab } from './gitlab';
+import { type AzureProviderState, azure } from './azure';
+import { type BitBucketProviderState, bitbucket } from './bitbucket';
+import { type GitHubProviderState, github } from './github';
+import { type GitLabProviderState, gitlab } from './gitlab';
 import { http } from './http';
 import type { RegistryProvider, RegistryProviderState } from './types';
 
@@ -75,4 +75,14 @@ export const fetchManifest = async (
 
 export * from './types';
 
-export { github, gitlab, bitbucket, azure, http };
+export {
+	github,
+	gitlab,
+	bitbucket,
+	azure,
+	http,
+	type AzureProviderState,
+	type GitHubProviderState,
+	type GitLabProviderState,
+	type BitBucketProviderState,
+};

sites/docs/src/lib/components/site/header.svelte

@@ -10,7 +10,7 @@
 
 	type Props = {
 		version: string;
-		stars: number;
+		stars: Promise<number>;
 	};
 
 	let { version, stars }: Props = $props();

sites/docs/src/lib/components/ui/github/star-button.svelte

@@ -3,22 +3,30 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import * as Icons from '$lib/components/icons';
 	import { Star } from 'lucide-svelte';
+	import { Tween } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
 
 	interface Props extends ButtonProps {
-		stars: number;
+		stars: Promise<number>;
 	}
 
 	let { stars, ...rest }: Props = $props();
+
+	let starCount = new Tween(0, { easing: cubicOut, duration: 2000 });
+
+	stars.then((s) => starCount.set(s));
 </script>
 
 <Button target="_blank" href="https://github.com/ieedan/jsrepo" variant="ghost" {...rest}>
 	<span class="sr-only">GitHub</span>
 	<Icons.GitHub />
 	<div class="hidden sm:flex place-items-center gap-1.5 h-full">
 		<Separator orientation="vertical" />
-		<span>
+		<div class="flex place-items-center gap-1 w-12">
 			<Star class="inline-flex size-3 text-primary -mt-0.5" />
-			<span class="text-sm text-muted-foreground font-mono">{stars}</span>
-		</span>
+			<span class="text-sm text-muted-foreground font-mono text-right p-0">
+				{starCount.current.toFixed(0)}
+			</span>
+		</div>
 	</div>
 </Button>

sites/docs/src/lib/ts/registry/index.ts

@@ -54,13 +54,18 @@ export const getProviderState = async (
 		const getLocal = async () =>
 			await provider.state(registryUrl, { token: getProviderToken(provider) });
 
-		// whichever is faster we use they should say the same thing
-		const result = await Promise.race([getLocal(), getCached()]);
+		const resolvedLocal = getLocal();
 
-		state = result;
-	}
+		// whichever is faster we use they should say the same thing
+		const result = await Promise.race([resolvedLocal, getCached()]);
 
-	if (!state) {
+		// if the cache comes back empty just wait the rest of the time for resolvedLocal to resolve
+		if (result === undefined) {
+			state = await resolvedLocal;
+		} else {
+			state = result;
+		}
+	} else {
 		state = await provider.state(registryUrl, { token: getProviderToken(provider) });
 	}
 

sites/docs/src/routes/+layout.server.ts

@@ -3,18 +3,24 @@ import { Err, Ok, type Result } from '$lib/ts/types/result';
 import { Octokit } from 'octokit';
 
 export const load = async () => {
-	const octokit = new Octokit({ auth: GITHUB_TOKEN });
-
-	const repo = await octokit.rest.repos.get({ owner: 'ieedan', repo: 'jsrepo' });
+	const stars = getStars();
 
 	const version = (await tryGetVersion()).unwrapOr('1.0.0');
 
 	return {
 		version,
-		stars: repo.data.stargazers_count
+		stars
 	};
 };
 
+const getStars = async () => {
+	const octokit = new Octokit({ auth: GITHUB_TOKEN });
+
+	const repo = await octokit.rest.repos.get({ owner: 'ieedan', repo: 'jsrepo' });
+
+	return repo.data.stargazers_count;
+};
+
 const tryGetVersion = async (): Promise<Result<string, string>> => {
 	try {
 		const response = await fetch(

sites/docs/src/routes/+page.server.ts

@@ -5,7 +5,7 @@ import { redis, VIEW_SET_NAME } from '$lib/ts/redis-client';
 import { action } from '$lib/ts/server-actions/search-registries/server';
 
 export const load = async () => {
-	const ranked = await redis.zrange(VIEW_SET_NAME, 0, -1, {
+	const ranked = redis.zrange(VIEW_SET_NAME, 0, -1, {
 		rev: true,
 		count: 5,
 		offset: 0

sites/docs/src/routes/+page.svelte

@@ -10,6 +10,7 @@
 	import Marquee from '$lib/components/animations/marquee/marquee.svelte';
 	import * as Icons from '$lib/components/icons';
 	import * as Terminal from '$lib/components/ui/terminal';
+	import { Skeleton } from '$lib/components/ui/skeleton';
 
 	const featuredRegistries = [
 		'github/ieedan/shadcn-svelte-extras',
@@ -232,16 +233,24 @@
 						<h3 class="text-xl font-medium">Most Popular</h3>
 						<div class="border-border border rounded-md w-full overflow-hidden">
 							<ul class="flex flex-col">
-								{#each data.popular as registry}
-									<li class="odd:bg-accent/75">
-										<a
-											href="/registry?url={registry}"
-											class="flex place-items-center last:border-b-0 border-b hover:underline p-3 hover:bg-accent"
-										>
-											{registry}
-										</a>
-									</li>
-								{/each}
+								{#await data.popular}
+									{#each { length: 5 } as _}
+										<li class="odd:bg-accent/75 h-12 flex place-items-center justify-center p-3">
+											<Skeleton class="h-4 w-full" />
+										</li>
+									{/each}
+								{:then mostPopular}
+									{#each mostPopular as registry}
+										<li class="odd:bg-accent/75">
+											<a
+												href="/registry?url={registry}"
+												class="flex place-items-center last:border-b-0 border-b hover:underline p-3 hover:bg-accent"
+											>
+												{registry}
+											</a>
+										</li>
+									{/each}
+								{/await}
 							</ul>
 						</div>
 					</div>