fix(ingress): loading and ui fixes [EE-5132] (#9959)

app/react/components/InlineLoader/InlineLoader.stories.tsx

@@ -0,0 +1,19 @@
+import { Story, Meta } from '@storybook/react';
+import { PropsWithChildren } from 'react';
+
+import { InlineLoader, Props } from './InlineLoader';
+
+export default {
+  title: 'Components/InlineLoader',
+  component: InlineLoader,
+} as Meta;
+
+function Template({ className, children }: PropsWithChildren<Props>) {
+  return <InlineLoader className={className}>{children}</InlineLoader>;
+}
+
+export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+Primary.args = {
+  className: 'test-class',
+  children: 'Loading...',
+};

app/react/components/InlineLoader/InlineLoader.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from '@@/Icon';
+
+export type Props = {
+  className: string;
+};
+
+export function InlineLoader({
+  children,
+  className,
+}: PropsWithChildren<Props>) {
+  return (
+    <div
+      className={clsx('text-muted flex items-center gap-2 text-sm', className)}
+    >
+      <Icon icon={Loader2} className="animate-spin-slow" />
+      {children}
+    </div>
+  );
+}

app/react/components/InlineLoader/index.ts

@@ -0,0 +1 @@
+export { InlineLoader } from './InlineLoader';