add fetching component

src/components/Fetching/Fetch.stories.tsx

@@ -0,0 +1,34 @@
+// https://react-icons.github.io/react-icons/icons?name=fi
+// https://github.com/react-icons/react-icons
+
+import { FetchingLine, FetchingRound, FetchingStatus } from './Fetching';
+
+export default {
+  title: 'Components/Fetching',
+};
+
+// to render the icon
+// set icon color, size... etc using className and then normal tailwind presents
+export const _FetchingRound = {
+  render: () => (
+    <div data-testid="fi-sun">
+      <FetchingRound />
+    </div>
+  ),
+};
+
+export const _FetchingLine = {
+  render: () => (
+    <div data-testid="fi-sun">
+      <FetchingLine />
+    </div>
+  ),
+};
+
+export const _FetchingStatus = {
+  render: () => (
+    <div data-testid="fi-sun">
+      <FetchingStatus text={'foo'} />
+    </div>
+  ),
+};

src/components/Fetching/Fetching.test.tsx

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { FetchingLine, FetchingRound, FetchingStatus } from './Fetching';
+
+describe('Components | Fetching | Fetching Round', () => {
+  test('it should render', () => {
+    render(<FetchingRound />);
+
+    let fetchingRound = screen.getByTestId('fetching-round');
+
+    expect(fetchingRound).toBeInTheDocument();
+  });
+});
+
+describe('Components | Fetching | Fetching Line', () => {
+  test('it should render', () => {
+    render(<FetchingLine />);
+
+    let fetchingLine = screen.getByTestId('fetching-line');
+
+    expect(fetchingLine).toBeInTheDocument();
+  });
+});
+
+describe('Components | Fetching | Fetching Status', () => {
+  test('it should render', () => {
+    render(<FetchingStatus text="foo" />);
+
+    let fetchingStatus = screen.getByTestId('fetching-status');
+
+    expect(fetchingStatus).toBeInTheDocument();
+  });
+});

src/components/Fetching/Fetching.tsx

@@ -0,0 +1,37 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+
+export function FetchingRound() {
+  return (
+    <span data-testid="fetching-round" className="relative flex h-3 w-3">
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-s-success opacity-75"></span>
+      <span className="relative inline-flex rounded-full h-3 w-3 bg-s-success"></span>
+    </span>
+  );
+}
+
+export function FetchingLine() {
+  return (
+    <div
+      data-testid="fetching-line"
+      className={`shadow rounded-md w-24 pt-0.5`}
+    >
+      <div className="animate-pulse flex">
+        <div className="flex-1 space-y-6 py-1">
+          <div className="h-2 bg-c-disabled-1 rounded"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FetchingStatus({ text }: { text: string }) {
+  return (
+    <div
+      data-testid="fetching-status"
+      className="bg-tertiary rounded-full w-fit px-3 pb-0.5 opacity-30"
+    >
+      {text}
+    </div>
+  );
+}

src/components/Fetching/index.ts

@@ -0,0 +1 @@
+export * from '.';

src/components/index.ts

@@ -33,3 +33,4 @@ export * from './Tooltip';
 export * from './Token';
 export * from './Tag';
 export * from './Accordion';
+export * from './Fetching';