feat: add loading component

src/app/globalSlice.ts

+import { createSlice } from "@reduxjs/toolkit";
+
+const global = createSlice({
+  name: "global",
+  initialState: { isLoading: false },
+  reducers: {
+    handleLoading: (state, action) => {
+      state.isLoading = action.payload;
+    },
+  },
+});
+
+const { actions, reducer } = global;
+export const { handleLoading } = actions;
+export default reducer;

src/app/store.ts

 import { configureStore } from "@reduxjs/toolkit";
 import headerReducer from "components/Header/headerSlice";
+import globalReducer from "./globalSlice";
 
 const rootReducer = {
   header: headerReducer,
+  global: globalReducer,
 };
 
 const store = configureStore({ reducer: rootReducer });

src/components/Header/index.tsx

@@ -10,6 +10,7 @@ import Sidenav from "../Sidenav";
 import { Typography } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "app/hooks";
 import { getCategories } from "./headerSlice";
+import { handleLoading } from "app/globalSlice";
 
 export default function Header() {
   const dispatch = useAppDispatch();
@@ -18,7 +19,19 @@ export default function Header() {
   const { data: categoryData } = useAppSelector((state) => state.header);
 
   useEffect(() => {
-    dispatch(getCategories());
+    dispatch(handleLoading(true));
+
+    try {
+      const fetchData = async () => {
+        await dispatch(getCategories());
+      };
+
+      fetchData();
+    } catch (err) {
+      console.error("ERROR: ", err);
+    } finally {
+      dispatch(handleLoading(false));
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -26,8 +39,6 @@ export default function Header() {
     setMobileOpen(!mobileOpen);
   };
 
-  console.log(categoryData);
-
   return (
     <Box sx={{ display: "flex" }} className="header">
       <AppBar

src/components/Loading/Loading.scss

+.loading {
+  display: none;
+
+  &-open {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

src/components/Loading/index.tsx

+import { CircularProgress } from "@mui/material";
+import React from "react";
+
+type Props = {
+  isOpen: boolean;
+};
+
+const Loading = ({ isOpen }: Props) => {
+  return (
+    <div className={`loading${isOpen ? " loading-open" : ""}`}>
+      <CircularProgress />
+    </div>
+  );
+};
+
+export default Loading;

src/pages/MainPage.tsx

+import { useAppSelector } from "app/hooks";
+import Loading from "components/Loading";
 import React from "react";
 import Newspaper from "../components/Newspaper";
 import { INewspaper } from "../utils/interface";
@@ -42,8 +44,11 @@ const newspapers: Array<INewspaper> = [
 ];
 
 const MainPage = () => {
+  const { isLoading } = useAppSelector((state) => state.global);
+
   return (
     <main className="container py-3">
+      <Loading isOpen={isLoading} />
       {newspapers.map((newspaper, idx) => (
         <Newspaper key={`newspaper-${idx}`} data={newspaper} />
       ))}

src/styles/components.scss

-@use "../components/Header/Header.scss";
-@use "../components/Newspaper/Newspaper.scss";
+@use "components/Header/Header.scss";
+@use "components/Newspaper/Newspaper.scss";
+@use "components/Loading/Loading.scss";