Merge pull request #170 from UzyKhs/fix/88-frontend-add-loading-empty-and-error-states-for-all-major-views

[88] Frontend: Add loading, empty, and error states for all major views

Author: Junirezz

frontend/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@stellar/freighter-api": "^6.0.1",
     "@stellar/stellar-sdk": "^14.6.1",
+    "es-toolkit": "^1.33.0",
     "lucide-react": "^0.577.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

frontend/src/components/ViewState.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+interface ViewStateProps {
+  title: string;
+  description: string;
+  tone?: "default" | "error";
+  action?: ReactNode;
+}
+
+export default function ViewState({
+  title,
+  description,
+  tone = "default",
+  action,
+}: ViewStateProps) {
+  return (
+    <div
+      className={`view-state ${tone === "error" ? "view-state-error" : ""}`}
+      role={tone === "error" ? "alert" : "status"}
+      aria-live="polite"
+    >
+      <h2 className="view-state-title">{title}</h2>
+      <p className="view-state-description">{description}</p>
+      {action ? <div className="view-state-action">{action}</div> : null}
+    </div>
+  );
+}

frontend/src/pages/Analytics.tsx

@@ -3,13 +3,20 @@ import { Activity } from "../components/icons";
 import ApiStatusBanner from "../components/ApiStatusBanner";
 import PageHeader from "../components/PageHeader";
 import { useVault } from "../context/VaultContext";
+import ViewState from "../components/ViewState";
 
 const Analytics: React.FC = () => {
     const { formattedTvl, summary, error, isLoading } = useVault();
 
     return (
         <div className="glass-panel" style={{ padding: '32px' }}>
             {error && <ApiStatusBanner error={error} />}
+            {isLoading && !error && (
+                <ViewState
+                    title="Loading analytics"
+                    description="Preparing current pool health and performance metrics."
+                />
+            )}
 
             <PageHeader
                 title={<span className="text-gradient">Project Analytics</span>}

frontend/src/pages/Portfolio.test.tsx

@@ -160,7 +160,7 @@ describe("Portfolio", () => {
   });
 
   it("supports keyboard sorting and pagination state from the URL", async () => {
-    renderPortfolio("/portfolio?page=2&pageSize=4&sortBy=asset&direction=asc");
+    renderPortfolio("/portfolio?page=2&pageSize=4&sortBy=asset&sortDirection=asc");
 
     expect(await screen.findByText(/Yield Bearing Cash/i)).toBeInTheDocument();
     expect(screen.getByText(/USDC Treasury Pool/i)).toBeInTheDocument();
@@ -173,7 +173,7 @@ describe("Portfolio", () => {
         "sortBy=asset",
       );
       expect(screen.getByTestId("location-display")).toHaveTextContent(
-        "direction=desc",
+        "sortDirection=desc",
       );
       expect(screen.getByTestId("location-display")).toHaveTextContent("page=1");
     });

frontend/src/pages/TransactionHistory.test.tsx

@@ -220,11 +220,13 @@ describe("TransactionHistory", () => {
     await waitFor(() => expect(screen.getByRole("table")).toBeInTheDocument());
 
     // Navigate to page 2
-    const nextBtn = screen.getByRole("button", { name: /Next/i });
+    const nextBtn = screen.getByRole("button", { name: /Go to next page/i });
     fireEvent.click(nextBtn);
 
     await waitFor(() =>
-      expect(screen.getByText(/Page 2 of/i)).toBeInTheDocument(),
+      expect(
+        screen.getByRole("button", { current: "page", name: /Go to page 2/i }),
+      ).toBeInTheDocument(),
     );
 
     // Apply a filter — should reset to page 1
@@ -234,7 +236,9 @@ describe("TransactionHistory", () => {
     fireEvent.change(filterSelect, { target: { value: "deposit" } });
 
     await waitFor(() =>
-      expect(screen.queryByText(/Page 2 of/i)).not.toBeInTheDocument(),
+      expect(
+        screen.getByRole("button", { current: "page", name: /Go to page 1/i }),
+      ).toBeInTheDocument(),
     );
   });
 

frontend/src/shims/esToolkitSortBy.ts

@@ -0,0 +1,3 @@
+import { sortBy } from "es-toolkit/compat";
+
+export default sortBy;

frontend/vite.config.ts

@@ -8,6 +8,11 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
 
   return {
+    resolve: {
+      alias: {
+        "es-toolkit/compat/sortBy": "/src/shims/esToolkitSortBy.ts",
+      },
+    },
     build: {
       sourcemap: true,
     },