Feature/mp 2539 add skeleton loading

dashboard/package.json

@@ -26,8 +26,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.24.0",
-    "react-router-dom": "^6.24.0",
-    "react-toastify": "^10.0.5"
+    "react-router-dom": "^6.24.0"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.43.1",
@@ -50,6 +49,7 @@
     "prettier": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+     "sass": "^1.77.8"
   }
 }

dashboard/src/api/client/axios.ts

@@ -1,7 +1,7 @@
-import axios from 'axios';
-import AxiosMockAdapter from 'axios-mock-adapter';
-import { ENV } from '../../constants/env';
-import registerLoggerInterceptor from '../interceptors/logger';
+import axios from "axios";
+import AxiosMockAdapter from "axios-mock-adapter";
+import { ENV } from "../../constants/env";
+import registerLoggerInterceptor from "../interceptors/logger";
 
 // Mock axios instance
 const mockInstance = axios.create();
@@ -15,7 +15,7 @@ export const mock = new AxiosMockAdapter(mockInstance, {
 const realInstance = axios.create();
 
 if (ENV.MOCKED) {
-  console.debug('Using mocked axios client');
+  console.debug("Using mocked axios client");
 }
 
 export default ENV.MOCKED ? mockInstance : realInstance;

dashboard/src/api/client/query.tsx

@@ -6,7 +6,6 @@ import {
 import { AxiosError } from "axios";
 import { StatusCodes } from "http-status-codes";
 import { FC, ReactNode } from "react";
-import { toast } from "react-toastify";
 
 type GeneralAPIResponse = {
   error?: {
@@ -51,7 +50,7 @@ const queryClient = new QueryClient({
     },
   },
   queryCache: new QueryCache({
-    onError: (error) => toast.error(`Something went wrong: ${error.message}`),
+    onError: (error) => console.error(`Something went wrong: ${error.message}`),
   }),
 });
 

dashboard/src/api/mocks/useGetProject.mock.ts

@@ -8,8 +8,5 @@ mock.onGet(/^\/api\/v1\/projects\/\d+$/).reply((req) => {
     (project) => project.id === projectId
   );
 
-  return [
-    200,
-    project
-  ];
+  return [200, project];
 });

dashboard/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { Sheet, Typography } from "@mui/joy";
 import { FC } from "react";
+import { Link } from "react-router-dom";
 import { ColorSchemeToggle } from "./ColorSchemeToggle";
 
 export const Header: FC = () => {
@@ -26,6 +27,8 @@ export const Header: FC = () => {
       }}
     >
       <Typography
+        component={Link}
+        to={"/"}
         level="h4"
         sx={{
           fontWeight: "bold",

dashboard/src/components/Placeholder.tsx

@@ -0,0 +1,22 @@
+import { Box, CircularProgress } from "@mui/joy";
+import { FC } from "react";
+
+export const Placeholder: FC = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: 150,
+        marginTop: '15%',
+      }
+      } >
+      <CircularProgress size="sm" value={35}>
+        <CircularProgress size="md" value={60}>
+          <CircularProgress size="lg" value={70} />
+        </CircularProgress>
+      </CircularProgress>
+    </Box >
+  );
+};