smooth loading ui, fix upgrade button always visible

Author: sbawabe

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

@@ -29,16 +29,18 @@ export async function FernCliVersionDisplay({
     return (
         <div className="text-gray-1100 flex items-center gap-2">
             <FernIcon className="size-5" fill="fill-gray-800" /> {fernVersionInfo?.current}
-            <UpgradeFernButton
-                orgName={orgName}
-                docsUrl={docsUrl}
-                githubUrl={githubUrl}
-                currentVersion={fernVersionInfo.current}
-                latestVersion={fernVersionInfo.latest}
-                baseBranch={baseBranch}
-                existingPr={fernVersionInfo.existingPr}
-                abbreviateText
-            />
+            {fernVersionInfo?.needsUpgrade && (
+                <UpgradeFernButton
+                    orgName={orgName}
+                    docsUrl={docsUrl}
+                    githubUrl={githubUrl}
+                    currentVersion={fernVersionInfo.current}
+                    latestVersion={fernVersionInfo.latest}
+                    baseBranch={baseBranch}
+                    existingPr={fernVersionInfo.existingPr}
+                    abbreviateText
+                />
+            )}
         </div>
     );
 }

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

@@ -4,11 +4,13 @@ import type { Auth0SessionData } from "@/app/services/auth0/getCurrentSession";
 import type { GithubSourceRepo } from "@/app/services/github/types";
 import Card from "@/components/ui/card";
 import { useLocalBranches } from "@/hooks/useLocalBranches";
+import { useLocalBranchesForSite } from "@/hooks/useLocalBranchesForSite";
 import type { DocsUrl } from "@/utils/types";
 import { BranchList } from "../BranchList";
 import { GoToEditorButton } from "../GoToEditorButton";
 import { VisualEditorEmptyCard } from "./VisualEditorEmptyCard";
 import { VisualEditorHeader } from "./VisualEditorHeader";
+import { VisualEditorLoadingCard } from "./VisualEditorLoadingCard";
 
 export function VisualEditorSectionClient({
     maybeCriticalUpdateWarning,
@@ -21,28 +23,36 @@ export function VisualEditorSectionClient({
     docsUrl: DocsUrl;
     sourceRepo?: GithubSourceRepo;
 }) {
-    const { userHasCreatedAnyBranch, loading } = useLocalBranches();
+    const { loading } = useLocalBranches();
+    const { filteredBranches } = useLocalBranchesForSite(docsUrl);
 
-    if (!userHasCreatedAnyBranch && !loading) {
-        return (
-            <VisualEditorEmptyCard>
+    return (
+        <>
+            {loading ? (
+                <VisualEditorLoadingCard />
+            ) : (
                 <>
-                    {maybeCriticalUpdateWarning}
-                    <div className="flex flex-col gap-2 sm:flex-row">
-                        <GoToEditorButton docsUrl={docsUrl} session={session} />
-                    </div>
+                    {filteredBranches.length === 0 ? (
+                        <VisualEditorEmptyCard>
+                            <>
+                                {maybeCriticalUpdateWarning}
+                                <div className="flex flex-col gap-2 sm:flex-row">
+                                    <GoToEditorButton docsUrl={docsUrl} session={session} />
+                                </div>
+                            </>
+                        </VisualEditorEmptyCard>
+                    ) : (
+                        <Card className="flex flex-col">
+                            {maybeCriticalUpdateWarning}
+                            <div className="flex items-center justify-between">
+                                <VisualEditorHeader />
+                                <GoToEditorButton docsUrl={docsUrl} session={session} />
+                            </div>
+                            <BranchList docsUrl={docsUrl} sourceRepo={sourceRepo} />
+                        </Card>
+                    )}
                 </>
-            </VisualEditorEmptyCard>
-        );
-    }
-    return (
-        <Card className="flex flex-col">
-            {maybeCriticalUpdateWarning}
-            <div className="flex items-center justify-between">
-                <VisualEditorHeader />
-                <GoToEditorButton docsUrl={docsUrl} session={session} />
-            </div>
-            <BranchList docsUrl={docsUrl} sourceRepo={sourceRepo} />
-        </Card>
+            )}
+        </>
     );
 }