From 5a85f2053f9c222744fcfbddd2db5e7b27b4786a Mon Sep 17 00:00:00 2001 From: Charles Vien Date: Sun, 30 Aug 2026 02:54:11 -0700 Subject: [PATCH 1/3] Fix document-wide recalcs and svg spinners --- products/desktop/docs/CONVENTIONS.md | 6 +++ .../autoresearch/AutoresearchPanel.test.tsx | 7 ++- .../autoresearch/PreBaselineState.tsx | 5 ++- .../canvas/freeform/CanvasBuildStatus.tsx | 5 ++- .../canvas/freeform/CanvasSidePanel.tsx | 9 +++- .../canvas/freeform/FreeformCanvasView.tsx | 16 ++++--- .../connectivity/ConnectivityBanner.tsx | 8 ++-- .../features/folder-picker/FolderPicker.tsx | 12 ++--- .../folder-picker/GitHubRepoPicker.tsx | 8 ++-- .../components/BranchSelector.tsx | 15 +++---- .../inbox/components/ResponderAgentRoster.tsx | 8 ++-- .../inbox/components/SignalSourceToggles.tsx | 5 ++- .../features/loops/components/LoopRunRow.tsx | 9 ++-- .../onboarding/components/CliCheckPanel.tsx | 5 ++- .../onboarding/components/SelectRepoStep.tsx | 8 ++-- .../pi-sessions/PiSessionControls.tsx | 13 ++---- .../features/pr-review/PrChecksSection.tsx | 8 ++-- .../features/pr-review/PrDecisionBlock.tsx | 5 ++- .../components/CloudSessionLifecycle.tsx | 7 +-- .../components/ReasoningLevelSelector.tsx | 11 ++--- .../components/SessionInitializingView.tsx | 6 +-- .../sessions/components/SessionView.tsx | 9 ++-- .../sessions/components/SideQuestionCard.tsx | 5 ++- .../components/chat-thread/ChatMarkdown.tsx | 5 ++- .../session-update/StatusNotificationView.tsx | 14 +++--- .../settings/sections/AccountSettings.tsx | 8 ++-- .../components/GroupWorktreesSection.tsx | 5 ++- .../sidebar/components/UpdateBanner.tsx | 16 ++++--- .../packages/ui/src/primitives/Spinner.tsx | 37 +++++++++++++++ .../packages/ui/src/primitives/StepList.tsx | 7 ++- .../packages/ui/src/styles/globals.css | 45 ++++++++++++------- 31 files changed, 204 insertions(+), 123 deletions(-) create mode 100644 products/desktop/packages/ui/src/primitives/Spinner.tsx diff --git a/products/desktop/docs/CONVENTIONS.md b/products/desktop/docs/CONVENTIONS.md index 88f4ca2a1d5d..41175e769147 100644 --- a/products/desktop/docs/CONVENTIONS.md +++ b/products/desktop/docs/CONVENTIONS.md @@ -166,6 +166,12 @@ When creating reusable styled components, accept both `className?: string` and ` Default line heights are set in [packages/ui/src/styles/globals.css](../packages/ui/src/styles/globals.css). Add `leading-*` only when the component needs a non-default line height. Pair arbitrary body text sizes with `leading-snug`; pair titles with `leading-tight`. +Spinning icons go through `Spin` or `Spinner` from [packages/ui/src/primitives/Spinner.tsx](../packages/ui/src/primitives/Spinner.tsx). Never put `animate-spin` on an ``: Chromium animates SVG transforms on the main thread, so one visible spinner costs a style recalc and a layerize pass on every frame. Stop the animation (`spinning={false}`) or unmount the spinner when it is hidden behind `opacity-0`. + +Do not write a `:has()` rule with `html` or `body` as the anchor and a descendant subject (`body:has(...) .thing`). Chromium re-checks such a rule after DOM mutations anywhere and restyles the whole document. Set custom properties on the anchor instead and consume them where the style applies, as the quill portal rule in `globals.css` does. + +Animate `transform` and `opacity` only. Keyframes on `left`, `width`, or `height` force a layout every frame. + ## Logging Do not use `console.*` in source. Inject `ROOT_LOGGER` as `RootLogger`, then scope it. diff --git a/products/desktop/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx b/products/desktop/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx index 844a24548d43..00fb891e1b10 100644 --- a/products/desktop/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx +++ b/products/desktop/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx @@ -57,10 +57,9 @@ describe("PreBaselineState", () => { }); expect(screen.getByText("Establishing the baseline")).toBeVisible(); - expect(screen.getByRole("status", { name: "Loading" })).toHaveClass( - "motion-safe:animate-spin", - "motion-reduce:animate-none", - ); + expect( + screen.getByRole("status", { name: "Loading" }).parentElement, + ).toHaveClass("animate-spin", "motion-reduce:animate-none"); const metrics = screen.getByRole("status", { name: "Loading autoresearch metrics", }); diff --git a/products/desktop/packages/ui/src/features/autoresearch/PreBaselineState.tsx b/products/desktop/packages/ui/src/features/autoresearch/PreBaselineState.tsx index 3183710c8ed2..2e80cc0b7595 100644 --- a/products/desktop/packages/ui/src/features/autoresearch/PreBaselineState.tsx +++ b/products/desktop/packages/ui/src/features/autoresearch/PreBaselineState.tsx @@ -1,6 +1,7 @@ import { MagnifyingGlass } from "@phosphor-icons/react"; import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas"; import { Spinner } from "@posthog/quill"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { Badge, Skeleton, Text } from "@radix-ui/themes"; export interface SessionActivity { @@ -24,7 +25,9 @@ export function PreBaselineState({
{live && ( - + + + )}
diff --git a/products/desktop/packages/ui/src/features/canvas/freeform/CanvasBuildStatus.tsx b/products/desktop/packages/ui/src/features/canvas/freeform/CanvasBuildStatus.tsx index 819194490a0b..1d4e089e2a1c 100644 --- a/products/desktop/packages/ui/src/features/canvas/freeform/CanvasBuildStatus.tsx +++ b/products/desktop/packages/ui/src/features/canvas/freeform/CanvasBuildStatus.tsx @@ -21,6 +21,7 @@ import { TooltipTrigger, } from "@posthog/quill"; import type { CanvasDiagnostic } from "@posthog/shared"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { toast } from "@posthog/ui/primitives/toast"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useEffect, useState } from "react"; @@ -106,7 +107,9 @@ export function CanvasBuildStatus({ className="flex items-center gap-1" data-testid="canvas-build-active" > - + + + {active.buildStatus === "queued" ? "Queued" : "Building"} · {elapsed} diff --git a/products/desktop/packages/ui/src/features/canvas/freeform/CanvasSidePanel.tsx b/products/desktop/packages/ui/src/features/canvas/freeform/CanvasSidePanel.tsx index 25f24b2fa82e..f02265793500 100644 --- a/products/desktop/packages/ui/src/features/canvas/freeform/CanvasSidePanel.tsx +++ b/products/desktop/packages/ui/src/features/canvas/freeform/CanvasSidePanel.tsx @@ -18,6 +18,7 @@ import { useCanvasChatPanelStore } from "@posthog/ui/features/canvas/stores/canv import type { EditorHandle } from "@posthog/ui/features/message-editor/types"; import { EmbeddedSessionView } from "@posthog/ui/features/sessions/components/EmbeddedSessionView"; import { taskDetailQuery } from "@posthog/ui/features/tasks/queries"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { useQuery } from "@tanstack/react-query"; import { type Ref, useEffect, useRef } from "react"; @@ -165,7 +166,9 @@ function CanvasChatLoader({ taskId }: { taskId: string }) { if (!task) { return (
- + + +
); } @@ -193,7 +196,9 @@ function CanvasCommentsLoader({ if (!task) { return (
- + + +
); } diff --git a/products/desktop/packages/ui/src/features/canvas/freeform/FreeformCanvasView.tsx b/products/desktop/packages/ui/src/features/canvas/freeform/FreeformCanvasView.tsx index 3cba1a0c6803..dae4c63adcf1 100644 --- a/products/desktop/packages/ui/src/features/canvas/freeform/FreeformCanvasView.tsx +++ b/products/desktop/packages/ui/src/features/canvas/freeform/FreeformCanvasView.tsx @@ -77,6 +77,7 @@ import { useCommentsQuery } from "@posthog/ui/features/sessions/components/useCo import { useSessionForTask } from "@posthog/ui/features/sessions/useSession"; import { taskDetailQuery } from "@posthog/ui/features/tasks/queries"; import { ResizableSidebar } from "@posthog/ui/primitives/ResizableSidebar"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { toast } from "@posthog/ui/primitives/toast"; import { track } from "@posthog/ui/shell/analytics"; import { @@ -924,10 +925,9 @@ export function FreeformCanvasView({ {interactive && (isGenerating && effectiveTaskId ? ( <> - + + + Generating @@ -1293,7 +1293,9 @@ function LoadingState() { - + + + Loading canvas @@ -1314,7 +1316,9 @@ function GeneratingState({ - + + + Generating An agent is building this canvas. diff --git a/products/desktop/packages/ui/src/features/connectivity/ConnectivityBanner.tsx b/products/desktop/packages/ui/src/features/connectivity/ConnectivityBanner.tsx index 9d3020bed6f5..aa9aa18f83c9 100644 --- a/products/desktop/packages/ui/src/features/connectivity/ConnectivityBanner.tsx +++ b/products/desktop/packages/ui/src/features/connectivity/ConnectivityBanner.tsx @@ -1,6 +1,7 @@ import { ArrowsClockwise, WifiHigh, WifiSlash } from "@phosphor-icons/react"; import { useService } from "@posthog/di/react"; import { useConnectivity } from "@posthog/ui/hooks/useConnectivity"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { Box } from "@radix-ui/themes"; import { AnimatePresence, motion } from "framer-motion"; import { useEffect, useRef, useState } from "react"; @@ -101,10 +102,9 @@ function OfflineRow({ onClick={onRetry} className="flex shrink-0 items-center gap-1.5 rounded-2 bg-(--amber-a4) px-2 py-1 font-medium text-(--amber-11) text-[12px] transition-colors hover:bg-(--amber-a5) disabled:opacity-60" > - + + + {isChecking ? "Checking…" : "Retry"}
diff --git a/products/desktop/packages/ui/src/features/folder-picker/FolderPicker.tsx b/products/desktop/packages/ui/src/features/folder-picker/FolderPicker.tsx index 67849b72363b..40cf21ae1fef 100644 --- a/products/desktop/packages/ui/src/features/folder-picker/FolderPicker.tsx +++ b/products/desktop/packages/ui/src/features/folder-picker/FolderPicker.tsx @@ -28,6 +28,7 @@ import { } from "@posthog/quill"; import type { RegisteredFolder } from "@posthog/ui/features/folders/types"; import { useFolders } from "@posthog/ui/features/folders/useFolders"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { toast } from "@posthog/ui/primitives/toast"; import { FIELD_TRIGGER_CLASS } from "@posthog/ui/styles/fieldTrigger"; import { Text } from "@radix-ui/themes"; @@ -178,10 +179,9 @@ export function FolderPicker({
{isOpening ? ( - + + + ) : ( )} @@ -195,7 +195,9 @@ export function FolderPicker({ {isOpening ? "Opening..." : displayValue || placeholder} {isOpening ? ( - + + + ) : ( )} diff --git a/products/desktop/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx b/products/desktop/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx index 6464a1bbe00f..7ee6c7ee82cb 100644 --- a/products/desktop/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx +++ b/products/desktop/packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx @@ -18,6 +18,7 @@ import { Spinner, Text, } from "@posthog/quill"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { Tooltip } from "@posthog/ui/primitives/Tooltip"; import { FIELD_TRIGGER_CLASS } from "@posthog/ui/styles/fieldTrigger"; import { defaultFilter } from "cmdk"; @@ -290,10 +291,9 @@ export function GitHubRepoPicker({ onRefresh(); }} > - + + + ) : null} diff --git a/products/desktop/packages/ui/src/features/git-interaction/components/BranchSelector.tsx b/products/desktop/packages/ui/src/features/git-interaction/components/BranchSelector.tsx index 22d257678ad1..0baf3c66cab6 100644 --- a/products/desktop/packages/ui/src/features/git-interaction/components/BranchSelector.tsx +++ b/products/desktop/packages/ui/src/features/git-interaction/components/BranchSelector.tsx @@ -4,7 +4,6 @@ import { Check, GitBranch, Plus, - Spinner, } from "@phosphor-icons/react"; import { useService } from "@posthog/di/react"; import { useHostTRPC } from "@posthog/host-router/react"; @@ -26,6 +25,7 @@ import type { GitBusyOperation, GitBusyState, } from "@posthog/shared/domain-types"; +import { Spin, Spinner } from "@posthog/ui/primitives/Spinner"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { type RefObject, useEffect, useMemo, useRef, useState } from "react"; import { Tooltip } from "../../../primitives/Tooltip"; @@ -59,7 +59,7 @@ const USE_INPUT_BRANCH_ACTION = "__use_input_branch__"; function LoadingRow({ label }: { label: string }) { return (
- + {label}
); @@ -386,7 +386,7 @@ export function BranchSelector({ className="min-w-0 max-w-[250px] shrink" > {showSpinner ? ( - + ) : ( )} @@ -470,10 +470,9 @@ export function BranchSelector({ onRefresh(); }} > - + + + ) : null} @@ -586,7 +585,7 @@ export function BranchSelector({ > {cloudBranchesFetchingMore ? ( <> - + Loading more… ) : ( diff --git a/products/desktop/packages/ui/src/features/inbox/components/ResponderAgentRoster.tsx b/products/desktop/packages/ui/src/features/inbox/components/ResponderAgentRoster.tsx index a93c745f62e8..3355d95498e0 100644 --- a/products/desktop/packages/ui/src/features/inbox/components/ResponderAgentRoster.tsx +++ b/products/desktop/packages/ui/src/features/inbox/components/ResponderAgentRoster.tsx @@ -14,6 +14,7 @@ import type { SignalSourceValues } from "@posthog/ui/features/inbox/components/S import { InboxBadge } from "@posthog/ui/features/inbox/components/utils/InboxBadge"; import { getSourceProductMeta } from "@posthog/ui/features/inbox/components/utils/source-product-icons"; import { Badge } from "@posthog/ui/primitives/Badge"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { Box, Flex, Spinner, Switch, Text } from "@radix-ui/themes"; import { type ComponentType, memo, useCallback } from "react"; @@ -225,10 +226,9 @@ const ResponderAgentCard = memo(function ResponderAgentCard({ {armed && agent.source === "session_replay" && status === "syncing" ? ( - + + + Session analysis run in progress… diff --git a/products/desktop/packages/ui/src/features/inbox/components/SignalSourceToggles.tsx b/products/desktop/packages/ui/src/features/inbox/components/SignalSourceToggles.tsx index 224c0b59b6f9..2cd542553566 100644 --- a/products/desktop/packages/ui/src/features/inbox/components/SignalSourceToggles.tsx +++ b/products/desktop/packages/ui/src/features/inbox/components/SignalSourceToggles.tsx @@ -21,6 +21,7 @@ import { import { GitHubSourceRepositoriesDialog } from "@posthog/ui/features/inbox/components/GitHubSourceRepositoriesDialog"; import { getSourceProductMeta } from "@posthog/ui/features/inbox/components/utils/source-product-icons"; import { Badge } from "@posthog/ui/primitives/Badge"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { memo, useCallback, useState } from "react"; export type SignalSourceValues = Record; @@ -317,7 +318,9 @@ function SourceRunningIndicator({ } return (
- + + + {message}
); diff --git a/products/desktop/packages/ui/src/features/loops/components/LoopRunRow.tsx b/products/desktop/packages/ui/src/features/loops/components/LoopRunRow.tsx index 869e64e3a566..216fd0215980 100644 --- a/products/desktop/packages/ui/src/features/loops/components/LoopRunRow.tsx +++ b/products/desktop/packages/ui/src/features/loops/components/LoopRunRow.tsx @@ -16,6 +16,7 @@ import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events"; import { StopCloudRunDialog } from "@posthog/ui/features/sessions/components/StopCloudRunDialog"; import { Badge } from "@posthog/ui/primitives/Badge"; import { Button } from "@posthog/ui/primitives/Button"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { toast } from "@posthog/ui/primitives/toast"; import { navigateToTaskDetail } from "@posthog/ui/router/navigationBridge"; import { track } from "@posthog/ui/shell/analytics"; @@ -145,11 +146,9 @@ export function LoopRunRow({ - + + + {run.status.replaceAll("_", " ")} {isLoading ? ( - + + + ) : ( statusBadge )} diff --git a/products/desktop/packages/ui/src/features/onboarding/components/SelectRepoStep.tsx b/products/desktop/packages/ui/src/features/onboarding/components/SelectRepoStep.tsx index 7c0f3ac5d153..da56a684a915 100644 --- a/products/desktop/packages/ui/src/features/onboarding/components/SelectRepoStep.tsx +++ b/products/desktop/packages/ui/src/features/onboarding/components/SelectRepoStep.tsx @@ -6,6 +6,7 @@ import { } from "@phosphor-icons/react"; import { repoMatchesGitHubRepos } from "@posthog/core/onboarding/repoProvider"; import { cn } from "@posthog/quill"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities"; import { Button, Flex, Text } from "@radix-ui/themes"; import { AnimatePresence, motion } from "framer-motion"; @@ -149,10 +150,9 @@ export function SelectRepoStep({ transition={{ duration: 0.15 }} > - + + + Detecting repository... diff --git a/products/desktop/packages/ui/src/features/pi-sessions/PiSessionControls.tsx b/products/desktop/packages/ui/src/features/pi-sessions/PiSessionControls.tsx index 751e12254fb8..2be5502ab9a5 100644 --- a/products/desktop/packages/ui/src/features/pi-sessions/PiSessionControls.tsx +++ b/products/desktop/packages/ui/src/features/pi-sessions/PiSessionControls.tsx @@ -1,10 +1,4 @@ -import { - CaretDown, - Lightning, - PiIcon, - Spinner, - Stack, -} from "@phosphor-icons/react"; +import { CaretDown, Lightning, PiIcon, Stack } from "@phosphor-icons/react"; import type { PiModelSelection, PiThinkingLevel, @@ -31,6 +25,7 @@ import { ModelCostFooter, } from "@posthog/ui/features/sessions/components/ModelCostChip"; import type { MessagingMode } from "@posthog/ui/features/sessions/messagingModeStore"; +import { Spinner } from "@posthog/ui/primitives/Spinner"; import { useState } from "react"; type PiModelOption = PiModelSelection & { name?: string }; @@ -97,7 +92,7 @@ export function PiModelSelector({ - + Loading... } @@ -121,7 +116,7 @@ export function PiModelSelector({ /> )} - + Loading models... diff --git a/products/desktop/packages/ui/src/features/pr-review/PrChecksSection.tsx b/products/desktop/packages/ui/src/features/pr-review/PrChecksSection.tsx index b0f3af955227..5fec6ab82da8 100644 --- a/products/desktop/packages/ui/src/features/pr-review/PrChecksSection.tsx +++ b/products/desktop/packages/ui/src/features/pr-review/PrChecksSection.tsx @@ -10,6 +10,7 @@ import { import type { PrCheck, PrCheckBucket } from "@posthog/core/git/router-schemas"; import { Spinner } from "@posthog/quill"; import { DetailSection } from "@posthog/ui/features/inbox/components/DetailSection"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { useMemo } from "react"; import { openExternalUrl } from "../../shell/openExternal"; import { usePrChecks } from "./usePrChecks"; @@ -178,10 +179,9 @@ function CheckBucketIcon({ bucket }: { bucket: PrCheckBucket }) { return ; case "pending": return ( - + + + ); case "pass": return ( diff --git a/products/desktop/packages/ui/src/features/pr-review/PrDecisionBlock.tsx b/products/desktop/packages/ui/src/features/pr-review/PrDecisionBlock.tsx index c07f3f4184bd..bcde8c65fc23 100644 --- a/products/desktop/packages/ui/src/features/pr-review/PrDecisionBlock.tsx +++ b/products/desktop/packages/ui/src/features/pr-review/PrDecisionBlock.tsx @@ -17,6 +17,7 @@ import { DropdownMenuTrigger, Spinner, } from "@posthog/quill"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { useState } from "react"; import { PrChecksSection } from "./PrChecksSection"; import { useApprovePr } from "./useApprovePr"; @@ -115,7 +116,9 @@ export function PrDecisionBlock({ prUrl }: PrDecisionBlockProps) { ) : gate.pendingChecks > 0 ? ( - + + + Checks running ) : gate.totalChecks === 0 ? ( diff --git a/products/desktop/packages/ui/src/features/sessions/components/CloudSessionLifecycle.tsx b/products/desktop/packages/ui/src/features/sessions/components/CloudSessionLifecycle.tsx index 37f6e0ac2d03..1fd80c3729b6 100644 --- a/products/desktop/packages/ui/src/features/sessions/components/CloudSessionLifecycle.tsx +++ b/products/desktop/packages/ui/src/features/sessions/components/CloudSessionLifecycle.tsx @@ -1,4 +1,5 @@ -import { Spinner, Warning } from "@phosphor-icons/react"; +import { Warning } from "@phosphor-icons/react"; +import { Spinner } from "@posthog/ui/primitives/Spinner"; import { Button, Flex, Text } from "@radix-ui/themes"; interface CloudStreamDisconnectedBannerProps { @@ -52,10 +53,10 @@ export function CloudStreamDisconnectedBanner({ ); } -export function ConnectingToAgent() { +export function ConnectingToAgent({ spinning = true }: { spinning?: boolean }) { return ( <> - + Connecting to agent... diff --git a/products/desktop/packages/ui/src/features/sessions/components/ReasoningLevelSelector.tsx b/products/desktop/packages/ui/src/features/sessions/components/ReasoningLevelSelector.tsx index c4f8dfc9c250..39e100641e33 100644 --- a/products/desktop/packages/ui/src/features/sessions/components/ReasoningLevelSelector.tsx +++ b/products/desktop/packages/ui/src/features/sessions/components/ReasoningLevelSelector.tsx @@ -2,11 +2,7 @@ import type { SessionConfigOption, SessionConfigSelectGroup, } from "@agentclientprotocol/sdk"; -import { - ArrowCounterClockwise, - Lightning, - Spinner, -} from "@phosphor-icons/react"; +import { ArrowCounterClockwise, Lightning } from "@phosphor-icons/react"; import { getCapabilityLadder, getReasoningEffortOptions, @@ -44,6 +40,7 @@ import { ModelCostFooter } from "@posthog/ui/features/sessions/components/ModelC import { ModelRadioItem } from "@posthog/ui/features/sessions/components/ModelRadioItem"; import type { AgentAdapter } from "@posthog/ui/features/settings/settingsStore"; import { AnimatedHeight } from "@posthog/ui/primitives/AnimatedHeight"; +import { Spinner } from "@posthog/ui/primitives/Spinner"; import { AnimatePresence, motion } from "framer-motion"; import { Fragment, useRef, useState } from "react"; import { flattenSelectOptions } from "../sessionStore"; @@ -163,7 +160,7 @@ export function ReasoningLevelSelector({ - + Loading... } @@ -183,7 +180,7 @@ export function ReasoningLevelSelector({ /> )} - + Loading models... diff --git a/products/desktop/packages/ui/src/features/sessions/components/SessionInitializingView.tsx b/products/desktop/packages/ui/src/features/sessions/components/SessionInitializingView.tsx index 7ee16c32773d..3e555a856598 100644 --- a/products/desktop/packages/ui/src/features/sessions/components/SessionInitializingView.tsx +++ b/products/desktop/packages/ui/src/features/sessions/components/SessionInitializingView.tsx @@ -1,5 +1,5 @@ -import { Spinner } from "@phosphor-icons/react"; import type { TaskRunStatus } from "@posthog/shared/domain-types"; +import { Spinner } from "@posthog/ui/primitives/Spinner"; import { Flex, Text } from "@radix-ui/themes"; import { useEffect, useState } from "react"; import zenHedgehog from "../../../assets/images/zen.png"; @@ -66,7 +66,7 @@ export function SessionInitializingView({ justify="center" className="absolute inset-0 bg-background" > - + ); } @@ -84,7 +84,7 @@ export function SessionInitializingView({ - + {visibleHeading} diff --git a/products/desktop/packages/ui/src/features/sessions/components/SessionView.tsx b/products/desktop/packages/ui/src/features/sessions/components/SessionView.tsx index 49e021d7f194..645935fc8441 100644 --- a/products/desktop/packages/ui/src/features/sessions/components/SessionView.tsx +++ b/products/desktop/packages/ui/src/features/sessions/components/SessionView.tsx @@ -1,4 +1,4 @@ -import { Pause, Spinner, Warning } from "@phosphor-icons/react"; +import { Pause, Warning } from "@phosphor-icons/react"; import type { FileAttachment } from "@posthog/core/message-editor/content"; import { hasSessionPromptEvent } from "@posthog/core/sessions/sessionEvents"; import { @@ -87,6 +87,7 @@ import type { Plan } from "@posthog/ui/features/sessions/types"; import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore"; import { useIsWorkspaceCloudRun } from "@posthog/ui/features/workspace/useWorkspace"; import { useConnectivity } from "@posthog/ui/hooks/useConnectivity"; +import { Spinner } from "@posthog/ui/primitives/Spinner"; import { toast } from "@posthog/ui/primitives/toast"; import { captureException, track } from "@posthog/ui/shell/analytics"; import { @@ -728,7 +729,7 @@ export function SessionView({ > {isRestoring ? ( <> - + Restoring... ) : ( @@ -757,7 +758,7 @@ export function SessionView({ justify="center" className="absolute inset-0 bg-background" > - + ) ) : ( @@ -858,7 +859,7 @@ export function SessionView({ : "opacity-100" }`} > - + {entry.status === "pending" && ( - + Answering… )} diff --git a/products/desktop/packages/ui/src/features/sessions/components/chat-thread/ChatMarkdown.tsx b/products/desktop/packages/ui/src/features/sessions/components/chat-thread/ChatMarkdown.tsx index 26a66b7599f2..a30ea9ea4046 100644 --- a/products/desktop/packages/ui/src/features/sessions/components/chat-thread/ChatMarkdown.tsx +++ b/products/desktop/packages/ui/src/features/sessions/components/chat-thread/ChatMarkdown.tsx @@ -26,6 +26,7 @@ import { looksLikeBareFilename, } from "@posthog/ui/features/sessions/components/session-update/fileLinkChips"; import { HighlightedCode } from "@posthog/ui/primitives/HighlightedCode"; +import { Spin } from "@posthog/ui/primitives/Spinner"; import { useCopy } from "@posthog/ui/primitives/useCopy"; import { parseArtifactLink } from "@posthog/ui/utils/artifactLinks"; import { @@ -91,7 +92,9 @@ const components: Components = { aria-label="Link loading" > {children} -