New loading icon

src-web/components/sidebar/Sidebar.tsx

@@ -14,9 +14,7 @@ import { getActiveRequest } from '../../hooks/useActiveRequest';
 import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
 import { useCreateDropdownItems } from '../../hooks/useCreateDropdownItems';
 import { useDeleteAnyRequest } from '../../hooks/useDeleteAnyRequest';
-import { useGrpcConnections } from '../../hooks/useGrpcConnections';
 import { useHotKey } from '../../hooks/useHotKey';
-import { useHttpResponses } from '../../hooks/useHttpResponses';
 import { useSidebarHidden } from '../../hooks/useSidebarHidden';
 import { getSidebarCollapsedMap } from '../../hooks/useSidebarItemCollapsed';
 import { useUpdateAnyFolder } from '../../hooks/useUpdateAnyFolder';
@@ -51,8 +49,6 @@ export function Sidebar({ className }: Props) {
   const [hidden, setHidden] = useSidebarHidden();
   const sidebarRef = useRef<HTMLElement>(null);
   const activeWorkspace = useActiveWorkspace();
-  const httpResponses = useHttpResponses();
-  const grpcConnections = useGrpcConnections();
   const [hasFocus, setHasFocus] = useState<boolean>(false);
   const [selectedId, setSelectedId] = useAtom(sidebarSelectedIdAtom);
   const [selectedTree, setSelectedTree] = useState<SidebarTreeNode | null>(null);
@@ -372,8 +368,6 @@ export function Sidebar({ className }: Props) {
         <SidebarItems
           treeParentMap={treeParentMap}
           selectedTree={selectedTree}
-          httpResponses={httpResponses}
-          grpcConnections={grpcConnections}
           tree={tree}
           draggingId={draggingId}
           onSelect={handleSelect}

src-web/components/sidebar/SidebarItem.tsx

@@ -1,4 +1,9 @@
-import type { AnyModel, GrpcConnection, HttpResponse } from '@yaakapp-internal/models';
+import type {
+  AnyModel,
+  GrpcConnection,
+  HttpResponse,
+  WebsocketConnection,
+} from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import { atom, useAtomValue } from 'jotai';
 import type { ReactElement } from 'react';
@@ -17,6 +22,7 @@ import { getWebsocketRequest } from '../../hooks/useWebsocketRequests';
 import { jotaiStore } from '../../lib/jotai';
 import { HttpMethodTag } from '../core/HttpMethodTag';
 import { Icon } from '../core/Icon';
+import { LoadingIcon } from '../core/LoadingIcon';
 import { StatusTag } from '../core/StatusTag';
 import type { SidebarTreeNode } from './Sidebar';
 import { sidebarSelectedIdAtom } from './SidebarAtoms';
@@ -39,6 +45,7 @@ export type SidebarItemProps = {
   child: SidebarTreeNode;
   latestHttpResponse: HttpResponse | null;
   latestGrpcConnection: GrpcConnection | null;
+  latestWebsocketConnection: WebsocketConnection | null;
 } & Pick<SidebarItemsProps, 'onSelect'>;
 
 type DragItem = {
@@ -58,6 +65,7 @@ export const SidebarItem = memo(function SidebarItem({
   className,
   latestHttpResponse,
   latestGrpcConnection,
+  latestWebsocketConnection,
   children,
 }: SidebarItemProps) {
   const ref = useRef<HTMLLIElement>(null);
@@ -283,13 +291,19 @@ export const SidebarItem = memo(function SidebarItem({
           {latestGrpcConnection ? (
             <div className="ml-auto">
               {latestGrpcConnection.state !== 'closed' && (
-                <Icon spin size="sm" icon="update" className="text-text-subtlest" />
+                <LoadingIcon size="sm" className="text-text-subtlest" />
+              )}
+            </div>
+          ) : latestWebsocketConnection ? (
+            <div className="ml-auto">
+              {latestWebsocketConnection.state !== 'closed' && (
+                <LoadingIcon size="sm" className="text-text-subtlest" />
               )}
             </div>
           ) : latestHttpResponse ? (
             <div className="ml-auto">
               {latestHttpResponse.state !== 'closed' ? (
-                <Icon spin size="sm" icon="refresh" className="text-text-subtlest" />
+                <LoadingIcon size="sm" className="text-text-subtlest" />
               ) : (
                 <StatusTag className="text-xs" response={latestHttpResponse} />
               )}

src-web/components/sidebar/SidebarItems.tsx

@@ -1,6 +1,8 @@
-import type { GrpcConnection, HttpResponse } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import React, { Fragment, memo } from 'react';
+import { useGrpcConnections } from '../../hooks/useGrpcConnections';
+import { useHttpResponses } from '../../hooks/useHttpResponses';
+import { useWebsocketConnections } from '../../hooks/useWebsocketConnections';
 import { VStack } from '../core/Stacks';
 import { DropMarker } from '../DropMarker';
 import type { SidebarTreeNode } from './Sidebar';
@@ -17,8 +19,6 @@ export interface SidebarItemsProps {
   handleEnd: (id: string) => void;
   handleDragStart: (id: string) => void;
   onSelect: (requestId: string) => void;
-  httpResponses: HttpResponse[];
-  grpcConnections: GrpcConnection[];
 }
 
 export const SidebarItems = memo(function SidebarItems({
@@ -32,9 +32,11 @@ export const SidebarItems = memo(function SidebarItems({
   handleEnd,
   handleMove,
   handleDragStart,
-  httpResponses,
-  grpcConnections,
 }: SidebarItemsProps) {
+  const httpResponses = useHttpResponses();
+  const grpcConnections = useGrpcConnections();
+  const websocketConnections = useWebsocketConnections();
+
   return (
     <VStack
       as="ul"
@@ -57,6 +59,9 @@ export const SidebarItems = memo(function SidebarItems({
               itemModel={child.model}
               latestHttpResponse={httpResponses.find((r) => r.requestId === child.id) ?? null}
               latestGrpcConnection={grpcConnections.find((c) => c.requestId === child.id) ?? null}
+              latestWebsocketConnection={
+                websocketConnections.find((c) => c.requestId === child.id) ?? null
+              }
               onMove={handleMove}
               onEnd={handleEnd}
               onSelect={onSelect}
@@ -71,8 +76,6 @@ export const SidebarItems = memo(function SidebarItems({
                   handleMove={handleMove}
                   hoveredIndex={hoveredIndex}
                   hoveredTree={hoveredTree}
-                  httpResponses={httpResponses}
-                  grpcConnections={grpcConnections}
                   onSelect={onSelect}
                   selectedTree={selectedTree}
                   tree={child}