clean up loading UIs

Author: sbawabe

packages/fern-dashboard/src/app/[orgName]/(homepage)/docs/[docsUrl]/loading.tsx

@@ -8,7 +8,7 @@ import getDocsSitesForOrg from "@/app/services/dal/fdr/getDocsSitesForOrg";
 import { getDocsGithubUrl } from "@/app/services/dal/github/getDocsGithubUrl";
 import { getAuthenticatedSessionOrRedirect } from "@/app/services/dal/organization";
 import { DocsSiteOverviewCard } from "@/components/docs-page/DocsSiteOverviewCard";
-import { VisualEditorEmptyCard } from "@/components/docs-page/visual-editor-section/VisualEditorEmptyCard";
+import { VisualEditorLoadingCard } from "@/components/docs-page/visual-editor-section/VisualEditorLoadingCard";
 import { VisualEditorSection } from "@/components/docs-page/visual-editor-section/VisualEditorSection";
 import { getDocsSiteUrl } from "@/utils/getDocsSiteUrl";
 import { parseDocsUrlParam } from "@/utils/parseDocsUrlParam";
@@ -43,7 +43,7 @@ export default async function Page(props: { params: Promise<{ orgName: Auth0OrgN
     return (
         <div className="flex w-full flex-col gap-4">
             <DocsSiteOverviewCard docsUrl={docsUrl} docsSite={currentDocsSite} orgName={orgName} />
-            <Suspense fallback={null}>
+            <Suspense fallback={<VisualEditorLoadingCard />}>
                 <VisualEditorSection docsUrl={docsUrl} session={session} orgName={orgName} />
             </Suspense>
         </div>

packages/fern-dashboard/src/app/[orgName]/(homepage)/docs/[docsUrl]/page.tsx

@@ -15,7 +15,7 @@ export function BranchList({ docsUrl, sourceRepo }: { docsUrl: DocsUrl; sourceRe
     const orgName = useOrgName();
     const router = useRouter();
 
-    const { deleteBranch } = useLocalBranches();
+    const { deleteBranch, loading } = useLocalBranches();
     const { filteredBranches } = useLocalBranchesForSite(docsUrl);
 
     // Pagination state
@@ -74,7 +74,9 @@ export function BranchList({ docsUrl, sourceRepo }: { docsUrl: DocsUrl; sourceRe
                 </div>
             ) : (
                 <div className="py-8 text-center">
-                    <p className="dark:text-gray-1200 text-gray-500">No open sessions found</p>
+                    <p className="dark:text-gray-1200 text-gray-500">
+                        {loading ? "Loading..." : "No open sessions found"}
+                    </p>
                 </div>
             )}
         </>

packages/fern-dashboard/src/components/docs-page/BranchList.tsx

@@ -0,0 +1,10 @@
+import Card from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function VisualEditorLoadingCard() {
+    return (
+        <Card className="flex flex-col">
+            <Skeleton className="h-24" />
+        </Card>
+    );
+}

packages/fern-dashboard/src/components/docs-page/visual-editor-section/VisualEditorLoadingCard.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { Auth0SessionData } from "@/app/services/auth0/getCurrentSession";
-import type { Auth0OrgName } from "@/app/services/auth0/types";
 import type { GithubSourceRepo } from "@/app/services/github/types";
 import Card from "@/components/ui/card";
 import { useLocalBranches } from "@/hooks/useLocalBranches";
@@ -22,10 +21,9 @@ export function VisualEditorSectionClient({
     docsUrl: DocsUrl;
     sourceRepo?: GithubSourceRepo;
 }) {
-    const { userHasCreatedAnyBranch } = useLocalBranches();
-    console.log("userHasCreatedAnyBranch", userHasCreatedAnyBranch);
+    const { userHasCreatedAnyBranch, loading } = useLocalBranches();
 
-    if (!userHasCreatedAnyBranch) {
+    if (!userHasCreatedAnyBranch && !loading) {
         return (
             <VisualEditorEmptyCard>
                 <>