diff --git a/src/components/Fetching/Fetch.stories.tsx b/src/components/Fetching/Fetch.stories.tsx
new file mode 100644
index 00000000..b49515a5
--- /dev/null
+++ b/src/components/Fetching/Fetch.stories.tsx
@@ -0,0 +1,36 @@
+// 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: () => (
+
+
+
+ ),
+};
+
+export const _FetchingLine = {
+ render: () => (
+
+
+
+ ),
+};
+
+export const _FetchingStatus = {
+ render: () => (
+
+ ),
+};
diff --git a/src/components/Fetching/Fetching.test.tsx b/src/components/Fetching/Fetching.test.tsx
new file mode 100644
index 00000000..122a8854
--- /dev/null
+++ b/src/components/Fetching/Fetching.test.tsx
@@ -0,0 +1,38 @@
+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();
+
+ let fetchingRound = screen.getByTestId('fetching-round');
+
+ expect(fetchingRound).toBeInTheDocument();
+ });
+});
+
+describe('Components | Fetching | Fetching Line', () => {
+ test('it should render', () => {
+ render();
+
+ let fetchingLine = screen.getByTestId('fetching-line');
+
+ expect(fetchingLine).toBeInTheDocument();
+ });
+});
+
+describe('Components | Fetching | Fetching Status', () => {
+ test('it should render', () => {
+ render(
+
+ {' '}
+ foo
+ ,
+ );
+
+ let fetchingStatus = screen.getByTestId('fetching-status');
+
+ expect(fetchingStatus).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Fetching/Fetching.tsx b/src/components/Fetching/Fetching.tsx
new file mode 100644
index 00000000..23995b0d
--- /dev/null
+++ b/src/components/Fetching/Fetching.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+
+export function FetchingRound() {
+ return (
+
+
+
+
+ );
+}
+
+export function FetchingLine() {
+ return (
+
+ );
+}
+
+export function FetchingStatus({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/Fetching/index.ts b/src/components/Fetching/index.ts
new file mode 100644
index 00000000..dc0dc896
--- /dev/null
+++ b/src/components/Fetching/index.ts
@@ -0,0 +1 @@
+export * from '.';
diff --git a/src/components/index.ts b/src/components/index.ts
index 50f9bf59..a9a5cd20 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -33,3 +33,4 @@ export * from './Tooltip';
export * from './Token';
export * from './Tag';
export * from './Accordion';
+export * from './Fetching';