feat: [FE-80] Add loading skeletons for data-heavy routes

frontend/features/LoadingSkeletons/LoadingSkeletonsComponent.spec.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { LoadingSkeletonsComponent } from "./LoadingSkeletonsComponent";
+describe("LoadingSkeletonsComponent", () => {
+  it("renders correctly", () => {
+    const { container } = render(<LoadingSkeletonsComponent />);
+    expect(container.firstChild).toBeDefined();
+  });
+});

frontend/features/LoadingSkeletons/LoadingSkeletonsComponent.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { useLoadingSkeletons } from "./useLoadingSkeletons";
+export const LoadingSkeletonsComponent: React.FC = () => {
+  const { isLoading, config } = useLoadingSkeletons();
+  if (!isLoading) return null;
+  return (
+    <div className="animate-pulse space-y-4">
+      {Array.from({ length: config.rowCount }).map((_, i) => (
+        <div key={i} className="h-4 bg-gray-200 rounded w-full"></div>
+      ))}
+    </div>
+  );
+};

frontend/features/LoadingSkeletons/LoadingSkeletonsStore.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { LoadingState } from "./LoadingSkeletonsTypes";
+export interface LoadingStore extends LoadingState {
+  setLoading: (val: boolean) => void;
+}
+export const LoadingSkeletonsContext = createContext<LoadingStore | undefined>(
+  undefined,
+);

frontend/features/LoadingSkeletons/LoadingSkeletonsTypes.ts

@@ -0,0 +1,8 @@
+export interface SkeletonConfig {
+  rowCount: number;
+  showAvatar?: boolean;
+}
+export interface LoadingState {
+  isLoading: boolean;
+  config: SkeletonConfig;
+}

frontend/features/LoadingSkeletons/useLoadingSkeletons.ts

@@ -0,0 +1,7 @@
+import { useState } from "react";
+import { SkeletonConfig } from "./LoadingSkeletonsTypes";
+export const useLoadingSkeletons = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [config, setConfig] = useState<SkeletonConfig>({ rowCount: 3 });
+  return { isLoading, config, setLoading: setIsLoading, setConfig };
+};