Optimize provider update pill renders

Cursor Agent committed 4 months ago

Commit f34cfbb1 parent 0c665651 file · +78 −55Browse files

Unified · Split

apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx+78−55

   error: "bg-destructive/14",
 } as const;
-function latestProviderCheckedAt(
+function useMountedIsoTimestamp(): string {
-  providers: ReadonlyArray<Pick<ServerProvider, "checkedAt">>,
+  const [mountedIsoTimestamp] = useState(() => new Date().toISOString());
-): string | undefined {
+  return mountedIsoTimestamp;
-  return providers.reduce<string | undefined>(
-    (latest, provider) =>
-      latest === undefined || provider.checkedAt > latest ? provider.checkedAt : latest,
-    undefined,
-  );
 }
-export function SidebarProviderUpdatePill() {
+function useProviderUpdateRenderedViewSynchronization(input: {
-  const navigate = useNavigate();
+  readonly exitingKey: string | null;
-  const providers = useAtomValue(primaryServerProvidersAtom);
+  readonly renderedView: ProviderUpdateSidebarPillView | null;
-  const [dismissedKeys, setDismissedKeys] = useState<ReadonlySet<string>>(() => new Set());
+  readonly setRenderedView: (view: ProviderUpdateSidebarPillView | null) => void;
-  const [renderedView, setRenderedView] = useState<ProviderUpdateSidebarPillView | null>(null);
+  readonly startExit: (key: string, nextView: ProviderUpdateSidebarPillView | null) => void;
-  const [pendingView, setPendingView] = useState<ProviderUpdateSidebarPillView | null>(null);
+  readonly view: ProviderUpdateSidebarPillView | null;
-  const [exitingKey, setExitingKey] = useState<string | null>(null);
+}) {
-  const [dismissAfterExitKey, setDismissAfterExitKey] = useState<string | null>(null);
+  const { exitingKey, renderedView, setRenderedView, startExit, view } = input;
-  const [visibleAfterIso, setVisibleAfterIso] = useState<string | undefined>();
-  const effectiveVisibleAfterIso = visibleAfterIso ?? latestProviderCheckedAt(providers);
-  const view = getProviderUpdateSidebarPillView(providers, {
-    ...(effectiveVisibleAfterIso !== undefined
-      ? { visibleAfterIso: effectiveVisibleAfterIso }
-      : {}),
-    dismissedKeys,
-  });
-  useEffect(() => {
-    if (visibleAfterIso === undefined && effectiveVisibleAfterIso !== undefined) {
-      setVisibleAfterIso(effectiveVisibleAfterIso);
-    }
-  }, [effectiveVisibleAfterIso, visibleAfterIso]);
-  const openProviderSettings = useCallback(() => {
-    void navigate({ to: "/settings/providers" });
-  }, [navigate]);
-  const displayedView = renderedView ?? view;
-  const dismissAfterVisibleMs = displayedView?.dismissAfterVisibleMs;
-  const viewKey = displayedView?.key ?? null;
-  const showDismissProgress =
-    dismissAfterVisibleMs !== undefined &&
-    displayedView?.tone !== "loading" &&
-    exitingKey !== viewKey;
-  const startExit = useCallback(
-    (key: string, nextView: ProviderUpdateSidebarPillView | null, dismissKey?: string) => {
-      if (exitingKey === key) {
-        return;
-      }
-      setPendingView(nextView);
-      setExitingKey(key);
-      setDismissAfterExitKey(dismissKey ?? null);
-    },
-    [exitingKey],
-  );
   useEffect(() => {
     if (exitingKey !== null) {
       return;
       startExit(renderedView.key, view);
       return;
     }
-  }, [exitingKey, renderedView, startExit, view]);
+  }, [exitingKey, renderedView, setRenderedView, startExit, view]);
+}
+function useProviderUpdateAutoDismiss(input: {
+  readonly dismissAfterVisibleMs: number | undefined;
+  readonly exitingKey: string | null;
+  readonly startExit: (
+    key: string,
+    nextView: ProviderUpdateSidebarPillView | null,
+    dismissKey?: string,
+  ) => void;
+  readonly viewKey: string | null;
+}) {
+  const { dismissAfterVisibleMs, exitingKey, startExit, viewKey } = input;
   useEffect(() => {
     if (!dismissAfterVisibleMs || !viewKey) {
       return;
     return () => window.clearTimeout(timeoutId);
   }, [dismissAfterVisibleMs, exitingKey, startExit, viewKey]);
+}
+export function SidebarProviderUpdatePill() {
+  const navigate = useNavigate();
+  const providers = useAtomValue(primaryServerProvidersAtom);
+  const [dismissedKeys, setDismissedKeys] = useState<ReadonlySet<string>>(() => new Set());
+  const visibleAfterIso = useMountedIsoTimestamp();
+  const view = getProviderUpdateSidebarPillView(providers, {
+    visibleAfterIso,
+    dismissedKeys,
+  });
+  const [renderedView, setRenderedView] = useState<ProviderUpdateSidebarPillView | null>(
+    () => view,
+  );
+  const [pendingView, setPendingView] = useState<ProviderUpdateSidebarPillView | null>(null);
+  const [exitingKey, setExitingKey] = useState<string | null>(null);
+  const [dismissAfterExitKey, setDismissAfterExitKey] = useState<string | null>(null);
+  const openProviderSettings = useCallback(() => {
+    void navigate({ to: "/settings/providers" });
+  }, [navigate]);
+  const displayedView = renderedView ?? view;
+  const dismissAfterVisibleMs = displayedView?.dismissAfterVisibleMs;
+  const viewKey = displayedView?.key ?? null;
+  const showDismissProgress =
+    dismissAfterVisibleMs !== undefined &&
+    displayedView?.tone !== "loading" &&
+    exitingKey !== viewKey;
+  const startExit = useCallback(
+    (key: string, nextView: ProviderUpdateSidebarPillView | null, dismissKey?: string) => {
+      if (exitingKey === key) {
+        return;
+      }
+      setPendingView(nextView);
+      setExitingKey(key);
+      setDismissAfterExitKey(dismissKey ?? null);
+    },
+    [exitingKey],
+  );
+  useProviderUpdateRenderedViewSynchronization({
+    exitingKey,
+    renderedView,
+    setRenderedView,
+    startExit,
+    view,
+  });
+  useProviderUpdateAutoDismiss({
+    dismissAfterVisibleMs,
+    exitingKey,
+    startExit,
+    viewKey,
+  });
   if (!displayedView) {
     return null;