Feat: If the interval between two outputs exceeds 600ms, a loading state is displayed at the end. (#16861)

### Summary

Feat: If the interval between two outputs exceeds 600ms, a loading state
is displayed at the end.

web/src/components/loading-dots/index.module.less

@@ -0,0 +1,39 @@
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  animation: loadingDots 1.4s ease-in-out infinite both;
+  margin-right: 4px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0s;
+  }
+}
+
+@keyframes loadingDots {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

web/src/components/loading-dots/index.tsx

@@ -0,0 +1,15 @@
+import styles from './index.module.less';
+
+interface LoadingDotsProps {
+  className?: string;
+}
+
+export function LoadingDots({ className }: LoadingDotsProps) {
+  return (
+    <span className={className} aria-label="Loading">
+      <span className={styles.dot} />
+      <span className={styles.dot} />
+      <span className={styles.dot} />
+    </span>
+  );
+}