add loading

src/components/Assistant/Assistant.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import { Block, Elem } from '../../utils/bem';
 import { ReactComponent as IconSend } from '../../assets/icons/send.svg';
 import { IconCross } from '../../assets/icons';
+import { SpinnerCircle } from '../SpinnerCircle/SpinnerCircle';
 
 import './Assistant.styl';
 import { TextArea } from '../../common/TextArea/TextArea';
@@ -102,7 +103,7 @@ export const Assistant: FC<{ onPrompt: (prompt: string) => void, awaitingSuggest
           mod={{ loading: awaitingSuggestions }}
         >
           <button type="submit">
-            <IconSend />
+            <Elem name='icon' tag={awaitingSuggestions ? SpinnerCircle : IconSend} width={24} height={24}/>
           </button>
         </Elem>
       </Block>

src/components/SpinnerCircle/SpinnerCircle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './SpinnerCircle.styl';
+import { Block } from '../../utils/bem';
+
+export const SpinnerCircle = ({ size, color, ...rest }) => {
+  const customStyles = {};
+
+  if (typeof size !== 'undefined') {
+    customStyles["----spinner-size"] = `${size}px`;
+  }
+  if (typeof color !== 'undefined') {
+    customStyles["----spinner-color"] = color;
+  }
+  return <Block name="circular-spinner" style={customStyles} {...rest}></Block>;
+};

src/components/SpinnerCircle/SpinnerCircle.styl

@@ -0,0 +1,98 @@
+.circular-spinner {
+  --spinner-size 16px
+  --spinner-color #1890FF
+	width: var(--spinner-size);
+	height: var(--spinner-size);
+	border-radius: 50%;
+	border: 2px solid rgba(9, 109, 217, 0.14);
+	position: relative;
+        flex 0 auto !important
+}
+.circular-spinner::before {
+	width: var(--spinner-size);
+	height: var(--spinner-size);
+	content: "";
+	position: absolute;
+	inset: -2px;
+	border-radius: 50%;
+	border: 2px solid var(--spinner-color);
+	animation: circular-spin-1 1s infinite linear alternate, circular-spin-2 2s infinite linear;
+}
+
+@keyframes circular-spin-1 {
+	0% {
+		clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+	}
+	12.5% {
+		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+	}
+	25% {
+		clip-path: polygon(
+			50% 50%,
+			0 0,
+			50% 0%,
+			100% 0%,
+			100% 100%,
+			100% 100%,
+			100% 100%
+		);
+	}
+	50% {
+		clip-path: polygon(
+			50% 50%,
+			0 0,
+			50% 0%,
+			100% 0%,
+			100% 100%,
+			50% 100%,
+			0% 100%
+		);
+	}
+	62.5% {
+		clip-path: polygon(
+			50% 50%,
+			100% 0,
+			100% 0%,
+			100% 0%,
+			100% 100%,
+			50% 100%,
+			0% 100%
+		);
+	}
+	75% {
+		clip-path: polygon(
+			50% 50%,
+			100% 100%,
+			100% 100%,
+			100% 100%,
+			100% 100%,
+			50% 100%,
+			0% 100%
+		);
+	}
+	100% {
+		clip-path: polygon(
+			50% 50%,
+			50% 100%,
+			50% 100%,
+			50% 100%,
+			50% 100%,
+			50% 100%,
+			0% 100%
+		);
+	}
+}
+@keyframes circular-spin-2 {
+	0% {
+		transform: scaleY(1) rotate(0deg);
+	}
+	49.99% {
+		transform: scaleY(1) rotate(135deg);
+	}
+	50% {
+		transform: scaleY(-1) rotate(0deg);
+	}
+	100% {
+		transform: scaleY(-1) rotate(-135deg);
+	}
+}