>(
+ ({ isLoading, error, data, loader, children, ...rest }, forwardedRef) => {
+ if (isLoading) {
+ return (
+
+ {loader || }
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error.message}
+
+ );
+ }
+
+ return (
+
+ {typeof children === 'function' ? children(data) : children}
+
+ );
+ }
+);
diff --git a/src/shared/components/async-renderer/index.stories.tsx b/src/shared/components/async-renderer/index.stories.tsx
new file mode 100644
index 0000000..d2cd53c
--- /dev/null
+++ b/src/shared/components/async-renderer/index.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { StoryFn, Meta } from '@storybook/react';
+
+import { AsyncRenderer } from './index.component';
+
+export default {
+ title: 'Components/AsyncRenderer',
+ component: AsyncRenderer,
+} as Meta;
+
+export const IsLoading: StoryFn = () => ;
+
+export const WithError: StoryFn = () => (
+
+);
+
+export const WithJsxData: StoryFn = () => (
+ Hello, World!
+);
+
+export const WithFCCData: StoryFn = () => (
+ {(data) => data.name}
+);
diff --git a/src/shared/components/async-renderer/index.test.tsx b/src/shared/components/async-renderer/index.test.tsx
new file mode 100644
index 0000000..e9f639a
--- /dev/null
+++ b/src/shared/components/async-renderer/index.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from 'test';
+
+import { AsyncRenderer } from './index.component';
+
+describe('', () => {
+ it('should render loader when isLoading is true', () => {
+ render(
+ null}
+ />
+ );
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ });
+
+ it('should render error message when error is not null', () => {
+ render(
+ null}
+ />
+ );
+ expect(screen.getByText('Error message')).toBeInTheDocument();
+ });
+
+ it('should render children when isLoading is false and error is null', () => {
+ render(
+ data.name}
+ />
+ );
+ expect(screen.getByText('Foo Bar Baz')).toBeInTheDocument();
+ });
+
+ it('should render children when isLoading is false and error is null', () => {
+ render(
+
+ Children
+
+ );
+ expect(screen.getByText('Children')).toBeInTheDocument();
+ });
+});
diff --git a/src/shared/services/.gitkeep b/src/shared/components/error-text/.gitkeep
similarity index 100%
rename from src/shared/services/.gitkeep
rename to src/shared/components/error-text/.gitkeep
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
index b63aca8..99a23c9 100644
--- a/src/shared/components/index.ts
+++ b/src/shared/components/index.ts
@@ -1,3 +1,5 @@
+export * from './loader/index.component';
export * from './headings/index.component';
export * from './error-boundary/index.component';
+export * from './async-renderer/index.component';
export * from './internet-notifier/index.component';
diff --git a/src/shared/components/internet-notifier/index.stories.tsx b/src/shared/components/internet-notifier/index.stories.tsx
index 6913cde..9a2cd72 100644
--- a/src/shared/components/internet-notifier/index.stories.tsx
+++ b/src/shared/components/internet-notifier/index.stories.tsx
@@ -1,5 +1,6 @@
import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+
+import { Meta } from '@storybook/react';
import { InternetNotifier } from './index.component';
@@ -8,6 +9,4 @@ export default {
component: InternetNotifier,
} as Meta;
-export const TurnOnAndOffYourWifiToSee: StoryFn = () => (
-
-);
+export const TurnOnAndOffYourWifiToSee = () => ;
diff --git a/src/shared/components/loader/base/index.component.tsx b/src/shared/components/loader/base/index.component.tsx
new file mode 100644
index 0000000..1da647d
--- /dev/null
+++ b/src/shared/components/loader/base/index.component.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useBaseLogic } from './useBaseLogic';
+
+type PrimitiveDivPropTypes = React.ComponentPropsWithoutRef<'div'>;
+export type LoaderElement = React.ElementRef<'div'>;
+export interface BasePropTypes extends PrimitiveDivPropTypes {
+ isLoading: boolean;
+ benefitOf?: number;
+}
+
+export const Base = React.forwardRef(function Base(
+ { isLoading, benefitOf, children, ...restProps },
+ forwardedRef
+) {
+ const { isDoneLoading } = useBaseLogic({ isLoading, benefitOf });
+
+ return (
+
+
{children}
+ {isDoneLoading &&
Done Loading
}
+