[Feature] UI - Navbar: Option to hide Usage Popup

[yuneng-jiang]

Relevant issues

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have Added testing in the tests/litellm/ directory, Adding at least 1 test is a hard requirement - see details
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible, it only solves 1 specific problem

CI (LiteLLM team)

CI status guideline:

• 50-55 passing tests: main is stable with minor issues.
• 45-49 passing tests: acceptable but needs attention
• <= 40 passing tests: unstable; be careful with your merges and assess the risk.

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Type

🆕 New Feature
✅ Test

Changes

Adds an option to hide the usage indicator in the dashboard UI. A "Hide Usage Indicator" toggle is available in the user dropdown; when enabled, the setting is stored in localStorage (disableUsageIndicator) and the usage indicator is not rendered in the sidebar. A new useDisableUsageIndicator hook uses useSyncExternalStore so the preference stays in sync across tabs (storage events and a custom event). The usage indicator component was renamed from usage_indicator.tsx to UsageIndicator.tsx; tests were added for useDisableUsageIndicator and for UsageIndicator (including the hide-when-disabled behavior).

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Feb 11, 2026 1:25am

[greptile-apps]

Greptile Overview

Greptile Summary

Adds a user-facing toggle in the navbar dropdown to hide the usage indicator from the sidebar. The implementation follows existing patterns (useDisableShowPrompts) by using useSyncExternalStore with localStorage for cross-tab reactivity, and integrates cleanly with the existing emitLocalStorageChange/setLocalStorageItem utilities.

• Renamed usage_indicator.tsx → UsageIndicator.tsx (PascalCase component convention) with updated imports in Sidebar2.tsx and leftnav.tsx
• New useDisableUsageIndicator hook mirrors the existing useDisableShowPrompts hook pattern
• "Hide Usage Indicator" toggle added to UserDropdown alongside the existing "Hide All Prompts" toggle
• Comprehensive test coverage added for both the hook (11 tests) and the component (12 tests), following project testing conventions
• Minor: API call to getRemainingUsers still fires when indicator is disabled (only rendering is suppressed)

Confidence Score: 4/5

• This PR is safe to merge — it's a UI-only feature addition with no backend changes.
• Clean, well-tested feature that follows existing codebase patterns precisely. The only minor concern is an unnecessary API call when the indicator is disabled, which is a performance optimization opportunity, not a correctness issue.
• UsageIndicator.tsx — API fetch still runs when indicator is disabled

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableUsageIndicator.ts	New hook following existing useDisableShowPrompts pattern exactly. Uses useSyncExternalStore with localStorage to reactively track the disableUsageIndicator preference.
ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableUsageIndicator.test.ts	Comprehensive test suite for the hook with 11 tests covering initial state, storage events, custom events, cleanup, and multi-instance behavior. Follows project testing conventions.
ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx	Added "Hide Usage Indicator" toggle following the same pattern as the existing "Hide All Prompts" toggle. Clean integration with localStorage utilities.
ui/litellm-dashboard/src/components/UsageIndicator.tsx	Renamed from usage_indicator.tsx. Added useDisableUsageIndicator hook and disableUsageIndicator check to conditionally hide the component. API call still fires when disabled. Contains unused NavStyleView component (pre-existing).
ui/litellm-dashboard/src/components/UsageIndicator.test.tsx	New comprehensive test suite replacing the old tests. 12 tests including the new disable behavior, loading/error states, and user interactions. Uses screen and userEvent per project conventions.
ui/litellm-dashboard/src/components/usage_indicator.test.tsx	Deleted old test file as part of the file rename from usage_indicator.tsx to UsageIndicator.tsx.
ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx	Updated import path from usage_indicator to UsageIndicator and reformatted indentation of the menuItems array (whitespace-only changes).
ui/litellm-dashboard/src/components/leftnav.tsx	Updated import path from usage_indicator to UsageIndicator and minor import reordering.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant Dropdown as UserDropdown
    participant LS as localStorage
    participant Hook as useDisableUsageIndicator
    participant UI as UsageIndicator

    User->>Dropdown: Toggle "Hide Usage Indicator"
    Dropdown->>LS: setLocalStorageItem("disableUsageIndicator", "true")
    Dropdown->>LS: emitLocalStorageChange("disableUsageIndicator")
    LS-->>Hook: CustomEvent(LOCAL_STORAGE_EVENT)
    Hook->>Hook: useSyncExternalStore re-reads snapshot
    Hook-->>UI: disableUsageIndicator = true
    UI->>UI: return null (hidden)

Loading

[greptile-apps]

_{8 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

ui/litellm-dashboard/src/components/UsageIndicator.tsx
The useEffect fetches usage data even when disableUsageIndicator is true — only the render is suppressed at line 546. Consider short-circuiting the fetch to avoid unnecessary API calls:

  useEffect(() => {
    const fetchData = async () => {
      if (!accessToken || disableUsageIndicator) return;

      setIsLoading(true);
      setError(null);

      try {
        const result = await getRemainingUsers(accessToken);
        setData(result);
      } catch (err) {
        console.error("Failed to fetch usage data:", err);
        setError("Failed to load usage data");
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [accessToken, disableUsageIndicator]);