Feature/loading component

src/components/Loading/Loading.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import Loading from "./Loading";
+import { ThemeProvider } from "styled-components";
+import mainTheme from "../../styles/mainTheme";
+import { BrowserRouter } from "react-router-dom";
+import UiContextWrapper from "../../features/Ui/store/UiContextWrapper";
+
+describe("Given a Loading component", () => {
+  describe("When is render", () => {
+    test("Then it should show `logo loading page`", () => {
+      const expectedAltText = "logo loading page";
+      const expectedImageSrc = "public/images/logo.png";
+
+      render(
+        <BrowserRouter>
+          <UiContextWrapper>
+            <ThemeProvider theme={mainTheme}>
+              <Loading />
+            </ThemeProvider>
+          </UiContextWrapper>
+        </BrowserRouter>,
+      );
+
+      const loadImage = screen.getByAltText(expectedAltText);
+      expect(loadImage).toHaveAttribute("src", expectedImageSrc);
+    });
+  });
+});

src/components/Loading/Loading.tsx

@@ -0,0 +1,9 @@
+const Loading = (): React.ReactElement => {
+  return (
+    <div>
+      <img src="public/images/logo.png" alt="logo loading page"></img>
+    </div>
+  );
+};
+
+export default Loading;

src/features/Ui/store/UiContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import UiContextStructure from "./types";
+
+const UiContext = createContext<UiContextStructure>({} as UiContextStructure);
+
+export default UiContext;

src/features/Ui/store/UiContextWrapper.tsx

@@ -0,0 +1,13 @@
+import UiContext from "./UiContext";
+import { PropsWithChildren, useMemo, useState } from "react";
+
+const UiContextWrapper = ({
+  children,
+}: PropsWithChildren): React.ReactElement => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const uiValue = useMemo(() => ({ isLoading, setIsLoading }), [isLoading]);
+
+  return <UiContext.Provider value={uiValue}>{children}</UiContext.Provider>;
+};
+
+export default UiContextWrapper;

src/features/Ui/store/types.ts

@@ -0,0 +1,6 @@
+interface UiContextStructure {
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+}
+
+export default UiContextStructure;

src/main.tsx

@@ -7,16 +7,19 @@ import mainTheme from "./styles/mainTheme";
 import CharacarterWrapper from "./features/characters/store/CharactersWrapper";
 import GlobalStyle from "./styles/GlobalStyle";
 import "@fontsource-variable/changa";
+import UiContextWrapper from "./features/Ui/store/UiContextWrapper";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <CharacarterWrapper>
-      <ThemeProvider theme={mainTheme}>
-        <BrowserRouter>
-          <GlobalStyle />
-          <App />
-        </BrowserRouter>
-      </ThemeProvider>
-    </CharacarterWrapper>
+    <UiContextWrapper>
+      <CharacarterWrapper>
+        <ThemeProvider theme={mainTheme}>
+          <BrowserRouter>
+            <GlobalStyle />
+            <App />
+          </BrowserRouter>
+        </ThemeProvider>
+      </CharacarterWrapper>
+    </UiContextWrapper>
   </React.StrictMode>,
 );

src/styles/mainTheme.ts

@@ -10,6 +10,7 @@ const mainTheme: DefaultTheme = {
     mainFont: "#000",
     secondaryFont: "#fff",
     inputBackground: "#fff",
+    logoMain: "#FF000",
   },
   typography: {
     mainFontFamily: "Verdana, Geneva, Tahoma, sans-serif",

src/styles/styled.d.ts

@@ -11,6 +11,7 @@ declare module "styled-components" {
       mainFont: string;
       secondaryFont: string;
       inputBackground: string;
+      logoMain: string;
     };
     typography: {
       mainFontFamily: string;