adding functions for loading indicator

client/app/providers/AppProvider.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+
+vi.mock("api/api", () => ({
+  getCfg: vi.fn(),
+}));
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
+describe("AppProvider loading indicator", () => {
+  beforeEach(() => {vi.resetAllMocks();}
+  );
+
+  afterEach(() => {vi.unstubAllGlobals();});
+
+  it("Loading indicator while fetching", async () => {
+    const userDef = deferred<any>();
+    const cfgDef = deferred<any>();
+
+    vi.stubGlobal("fetch", vi.fn((input: any) => {
+      const url = String(input);
+      if (url.includes("/apis/web/v1/user/me")) {
+        return userDef.promise.then((data) => ({
+          ok: true,
+          json: async () => data,
+        })) as any;
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    }));
+
+    const { getCfg } = await import("api/api");
+    (getCfg as any).mockReturnValue(cfgDef.promise);
+
+    const { AppProvider } = await import("./AppProvider");
+
+    render(
+      <AppProvider>
+        <div>APP CONTENT</div>
+      </AppProvider>
+    );
+
+    expect(screen.getByRole("status", { name: /loading/i })).toBeInTheDocument();
+    expect(screen.queryByText("APP CONTENT")).not.toBeInTheDocument();
+
+    userDef.resolve({ username: "test-user" });
+    cfgDef.resolve({ default_theme: "testing" });
+
+    expect(await screen.findByText("APP CONTENT")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByRole("status", { name: /loading/i })).not.toBeInTheDocument();
+    });
+  });
+});

client/app/providers/AppProvider.tsx

@@ -1,5 +1,6 @@
 import { getCfg, type User } from "api/api";
 import { createContext, useContext, useEffect, useState } from "react";
+import LoadingIndicator from "~/components/LoadingIndicator";
 
 interface AppContextType {
   user: User | null | undefined;
@@ -26,8 +27,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [defaultTheme, setDefaultTheme] = useState<string | undefined>(
     undefined
   );
-  const [configurableHomeActivity, setConfigurableHomeActivity] =
-    useState<boolean>(false);
+  const [configurableHomeActivity, setConfigurableHomeActivity] = useState<boolean>(false);
   const [homeItems, setHomeItems] = useState<number>(0);
 
   const setUsername = (value: string) => {
@@ -53,14 +53,15 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       if (cfg.default_theme !== "") {
         setDefaultTheme(cfg.default_theme);
       } else {
-        setDefaultTheme("yuu");
+        setDefaultTheme("Testing");
       }
     });
   }, []);
 
-  // Block rendering the app until config is loaded
-  if (user === undefined || defaultTheme === undefined) {
-    return null;
+  const isLoading = user === undefined || defaultTheme === undefined;
+
+  if (isLoading) {
+    return <LoadingIndicator label="Loading app" />;
   }
 
   const contextValue: AppContextType = {