feat(web): add skeleton to LatestCommitInfo while loading

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added warning message that fires on startup when host environment contains env vars that simple-git flags as unsafe. [#1193](https://github.com/sourcebot-dev/sourcebot/pull/1193)
+- Added a loading skeleton to the latest commit info bar in the code browser. [#1195](https://github.com/sourcebot-dev/sourcebot/pull/1195)
 
 ### Fixed
 - Add missing schema changes introduced in [#1170](https://github.com/sourcebot-dev/sourcebot/pull/1170). [#1176](https://github.com/sourcebot-dev/sourcebot/pull/1176)

packages/web/src/app/(app)/browse/components/latestCommitInfo.tsx

@@ -8,11 +8,12 @@ import { isServiceError } from "@/lib/utils";
 import { useBrowseParams } from "../hooks/useBrowseParams";
 import { formatAuthorsText, getCommitAuthors } from "./commitAuthors";
 import { AuthorsAvatarGroup } from "./commitParts";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export const LatestCommitInfo = () => {
     const { repoName, revisionName, path } = useBrowseParams();
 
-    const { data: commit } = useQuery({
+    const { data: commit, isPending } = useQuery({
         queryKey: ['latestCommitInfo', repoName, revisionName ?? null, path],
         queryFn: async () => {
             const result = await listCommits({
@@ -34,6 +35,17 @@ export const LatestCommitInfo = () => {
         [commit],
     );
 
+    if (isPending) {
+        return (
+            <div className="flex flex-row items-center gap-2 min-w-0 overflow-hidden">
+                <Skeleton className="h-5 w-5 rounded-full" />
+                <Skeleton className="h-4 w-24 flex-shrink-0" />
+                <Skeleton className="h-4 w-64 max-w-full" />
+                <Skeleton className="h-4 w-20 flex-shrink-0" />
+            </div>
+        );
+    }
+
     if (!commit) {
         return null;
     }