From d776478350a730c83e51bb55c561a72192380b82 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 11 Sep 2026 14:09:56 -0400
Subject: [PATCH] add better page loading indicator

---
 src/app/[orgId]/loading.tsx                   |  8 +--
 src/components/LoadingDots.tsx                | 56 +++++++++++++++++++
 src/components/OrgRouteLoading.tsx            | 45 +++++++++++++++
 .../LauncherFlatResourceList.tsx              |  5 +-
 .../resource-launcher/LauncherGroupList.tsx   |  5 +-
 .../LauncherGroupSection.tsx                  |  5 +-
 6 files changed, 112 insertions(+), 12 deletions(-)
 create mode 100644 src/components/LoadingDots.tsx
 create mode 100644 src/components/OrgRouteLoading.tsx

diff --git a/src/app/[orgId]/loading.tsx b/src/app/[orgId]/loading.tsx
index 0f7ea0d31..0ac4b304d 100644
--- a/src/app/[orgId]/loading.tsx
+++ b/src/app/[orgId]/loading.tsx
@@ -1,9 +1,5 @@
-import { Loader2 } from "lucide-react";
+import OrgRouteLoading from "@app/components/OrgRouteLoading";
 
 export default function OrgPageLoading() {
-    return (
-        <div className="flex items-center justify-center py-16">
-            <Loader2 className="size-6 animate-spin text-muted-foreground" />
-        </div>
-    );
+    return <OrgRouteLoading />;
 }
diff --git a/src/components/LoadingDots.tsx b/src/components/LoadingDots.tsx
new file mode 100644
index 000000000..d1de6a19f
--- /dev/null
+++ b/src/components/LoadingDots.tsx
@@ -0,0 +1,56 @@
+import { cn } from "@app/lib/cn";
+
+type LoadingDotsProps = {
+    className?: string;
+    size?: "sm" | "md";
+};
+
+const sizeClasses = {
+    sm: {
+        gap: "gap-1.5",
+        dot: "h-1.5 w-1.5"
+    },
+    md: {
+        gap: "gap-2.5",
+        dot: "h-2.5 w-2.5"
+    }
+} as const;
+
+export default function LoadingDots({
+    className,
+    size = "md"
+}: LoadingDotsProps) {
+    const classes = sizeClasses[size];
+
+    return (
+        <span
+            className={cn(
+                "flex items-center text-muted-foreground",
+                classes.gap,
+                className
+            )}
+        >
+            <span
+                className={cn(
+                    "rounded-full bg-current animate-dot-pulse",
+                    classes.dot
+                )}
+                style={{ animationDelay: "0ms" }}
+            />
+            <span
+                className={cn(
+                    "rounded-full bg-current animate-dot-pulse",
+                    classes.dot
+                )}
+                style={{ animationDelay: "200ms" }}
+            />
+            <span
+                className={cn(
+                    "rounded-full bg-current animate-dot-pulse",
+                    classes.dot
+                )}
+                style={{ animationDelay: "400ms" }}
+            />
+        </span>
+    );
+}
diff --git a/src/components/OrgRouteLoading.tsx b/src/components/OrgRouteLoading.tsx
new file mode 100644
index 000000000..29d12c5ed
--- /dev/null
+++ b/src/components/OrgRouteLoading.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import BrandingLogo from "@app/components/BrandingLogo";
+import LoadingDots from "@app/components/LoadingDots";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+
+export default function OrgRouteLoading() {
+    const { env } = useEnvContext();
+    const { isUnlocked } = useLicenseStatusContext();
+
+    const logoWidth = isUnlocked()
+        ? env.branding.logo?.navbar?.width || 98
+        : 98;
+    const logoHeight = isUnlocked()
+        ? env.branding.logo?.navbar?.height || 32
+        : 32;
+
+    return (
+        <div className="relative h-screen-safe overflow-hidden">
+            <div className="absolute top-0 left-0 right-0 z-50">
+                <div className="px-6 py-2">
+                    <div className="container mx-auto max-w-12xl">
+                        <div className="flex h-16 items-center">
+                            <Link
+                                href="/"
+                                className="flex shrink-0 items-center"
+                            >
+                                <BrandingLogo
+                                    width={logoWidth}
+                                    height={logoHeight}
+                                />
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="absolute inset-0 flex items-center justify-center">
+                <LoadingDots size="md" />
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/resource-launcher/LauncherFlatResourceList.tsx b/src/components/resource-launcher/LauncherFlatResourceList.tsx
index 7bbc01ccb..e14e6e452 100644
--- a/src/components/resource-launcher/LauncherFlatResourceList.tsx
+++ b/src/components/resource-launcher/LauncherFlatResourceList.tsx
@@ -9,6 +9,7 @@ import type {
 } from "@server/routers/launcher/types";
 import { LAUNCHER_FLAT_GROUP_KEY } from "@server/routers/launcher/types";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import LoadingDots from "@app/components/LoadingDots";
 import { Loader2 } from "lucide-react";
 import { useEffect, useMemo, useRef } from "react";
 import { LauncherEmptyState } from "./LauncherEmptyState";
@@ -81,8 +82,8 @@ export function LauncherFlatResourceList({
     if (resources.length === 0) {
         if (isFetching) {
             return (
-                <div className="flex items-center justify-center py-16 text-muted-foreground">
-                    <Loader2 className="size-6 animate-spin" />
+                <div className="flex items-center justify-center py-16">
+                    <LoadingDots size="sm" />
                 </div>
             );
         }
diff --git a/src/components/resource-launcher/LauncherGroupList.tsx b/src/components/resource-launcher/LauncherGroupList.tsx
index ecf60a773..46b4ba0b1 100644
--- a/src/components/resource-launcher/LauncherGroupList.tsx
+++ b/src/components/resource-launcher/LauncherGroupList.tsx
@@ -8,6 +8,7 @@ import type {
     LauncherViewConfig
 } from "@server/routers/launcher/types";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import LoadingDots from "@app/components/LoadingDots";
 import { Loader2 } from "lucide-react";
 import { useEffect, useMemo, useRef } from "react";
 import { LauncherEmptyState } from "./LauncherEmptyState";
@@ -109,8 +110,8 @@ export function LauncherGroupList({
     if (groups.length === 0) {
         if (isFetching) {
             return (
-                <div className="flex items-center justify-center py-16 text-muted-foreground">
-                    <Loader2 className="size-6 animate-spin" />
+                <div className="flex items-center justify-center py-16">
+                    <LoadingDots size="sm" />
                 </div>
             );
         }
diff --git a/src/components/resource-launcher/LauncherGroupSection.tsx b/src/components/resource-launcher/LauncherGroupSection.tsx
index 91320b383..c40ceb7d0 100644
--- a/src/components/resource-launcher/LauncherGroupSection.tsx
+++ b/src/components/resource-launcher/LauncherGroupSection.tsx
@@ -22,6 +22,7 @@ import {
     LAUNCHER_UNLABELED_GROUP_KEY
 } from "@server/routers/launcher/types";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import LoadingDots from "@app/components/LoadingDots";
 import { Loader2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
@@ -169,8 +170,8 @@ export function LauncherGroupSection({
 
             <CollapsibleContent className="w-full">
                 {showInitialLoader ? (
-                    <div className="flex items-center justify-center py-10 text-muted-foreground">
-                        <Loader2 className="size-5 animate-spin" />
+                    <div className="flex items-center justify-center py-10">
+                        <LoadingDots size="sm" />
                     </div>
                 ) : resources.length === 0 ? (
                     <p className="py-4 text-sm text-muted-foreground">