Make a spinning icon when expanding takes longer

Author: dfalbel

src/vs/workbench/contrib/positronConnections/browser/components/schemaNavigation.css

@@ -62,6 +62,10 @@
 	justify-content: center;
 }
 
+.connections-item .expand-collapse-area .animate-spin {
+	animation: spin 1s linear infinite;
+}
+
 .connections-item.selected {
 	color: var(--vscode-positronVariables-activeSelectionForeground);
 	background: var(--vscode-positronVariables-activeSelectionBackground);

src/vs/workbench/contrib/positronConnections/browser/components/schemaNavigation.tsx

@@ -177,8 +177,13 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 
 	// If the connection is not expandable, we add some more padding.
 	const padding = props.item.level * 10 + (props.item.expanded === undefined ? 26 : 0);
+	const [expanding, setExpanding] = useState<boolean>(false);
+
 	const handleExpand = () => {
 		props.onToggleExpand(props.item.id);
+		setTimeout(() => {
+			setExpanding(true);
+		}, 100);
 	};
 
 	const iconClass = (kind?: string) => {
@@ -270,6 +275,25 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 		}
 	};
 
+	const expandIcon = (() => {
+		if (props.item.expanded === undefined) {
+			return <></>;
+		}
+
+		const className = expanding ?
+			`codicon codicon-loading animate-spin` :
+			`codicon codicon-chevron-${props.item.expanded ? 'down' : 'right'}`;
+
+		return (
+			<div
+				className='expand-collapse-area'
+				onClick={handleExpand}
+			>
+				<div className={className} />
+			</div>
+		)
+	})();
+
 	return (
 		<div
 			className={positronClassNames(
@@ -279,19 +303,7 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 			style={props.style}
 		>
 			<div className='nesting' style={{ width: `${padding}px` }}></div>
-			{
-				props.item.expanded === undefined ?
-					<></> :
-					<div
-						className='expand-collapse-area'
-						onClick={handleExpand}
-					>
-						<div
-							className={`codicon codicon-chevron-${props.item.expanded ? 'down' : 'right'}`}
-						>
-						</div>
-					</div>
-			}
+			{expandIcon}
 			<div
 				className='connections-details'
 				onMouseDown={rowMouseDownHandler}