fix brief page not found while accessing plug page

src/PluginEngine.tsx

@@ -1,4 +1,8 @@
-import { CareAppsContext, useCareApps } from "@/hooks/useCareApps";
+import {
+  CareAppsContext,
+  CareAppsLoadingContext,
+  useCareApps,
+} from "@/hooks/useCareApps";
 import {
   PluginManifest,
   PluginManifestWithMeta,
@@ -73,13 +77,16 @@ export default function PluginEngine({
   children: React.ReactNode;
 }) {
   // Fetch enabled plugins from the backend API
-  const { data: enabledPlugins } = useQuery({
-    queryKey: ["enabled-plugins"],
-    queryFn: query(plugConfigApi.list, {
-      silent: (response) => response.status === 401 || response.status === 403,
-    }),
-    retry: false,
-  });
+  const { data: enabledPlugins, isLoading: isEnabledPluginsLoading } = useQuery(
+    {
+      queryKey: ["enabled-plugins"],
+      queryFn: query(plugConfigApi.list, {
+        silent: (response) =>
+          response.status === 401 || response.status === 403,
+      }),
+      retry: false,
+    },
+  );
 
   const resolvedPlugins = useMemo(
     () => mergePlugConfigs(enabledPlugins?.configs ?? []),
@@ -119,6 +126,10 @@ export default function PluginEngine({
     window.__CARE_PLUGIN_RUNTIME__ = deepFreeze({ meta: pluginMeta });
   }, [pluginMeta]);
 
+  // Expose plugin loading state to show loaders while a plugin page is being accessed
+  const arePluginsLoading =
+    isEnabledPluginsLoading || pluginsQuery.some((plugin) => plugin.isLoading);
+
   // Register plugin overrides
   const overrideCleanupRef = useRef<(() => void)[]>([]);
 
@@ -160,7 +171,9 @@ export default function PluginEngine({
         }
       >
         <CareAppsContext.Provider value={pluginsQuery}>
-          <Suspense fallback={<Loading />}>{children}</Suspense>
+          <CareAppsLoadingContext.Provider value={arePluginsLoading}>
+            <Suspense fallback={<Loading />}>{children}</Suspense>
+          </CareAppsLoadingContext.Provider>
         </CareAppsContext.Provider>
       </ErrorBoundary>
     </Suspense>

src/Routers/AppRouter.tsx

@@ -7,12 +7,17 @@ import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar, SidebarFor } from "@/components/ui/sidebar/app-sidebar";
 
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
+import Loading from "@/components/Common/Loading";
 import BrowserWarning from "@/components/ErrorPages/BrowserWarning";
 import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
 import SessionExpired from "@/components/ErrorPages/SessionExpired";
 
 import useAuthUser from "@/hooks/useAuthUser";
-import { useOrganizationRoutes, usePluginRoutes } from "@/hooks/useCareApps";
+import {
+  useCareAppsLoading,
+  useOrganizationRoutes,
+  usePluginRoutes,
+} from "@/hooks/useCareApps";
 import useSidebarState from "@/hooks/useSidebarState";
 
 import { routes as publicRoutes } from "@/Routers/PublicRouter";
@@ -99,6 +104,7 @@ const publicRedirects = Object.fromEntries(
 export default function AppRouter() {
   const pluginRoutes = usePluginRoutes();
   const organizationRoutes = useOrganizationRoutes();
+  const arePluginsLoading = useCareAppsLoading();
   let routes = Routes;
 
   useRedirect("/user", "/users");
@@ -119,7 +125,11 @@ export default function AppRouter() {
 
   const sidebarFor = isAdminPage ? SidebarFor.ADMIN : SidebarFor.FACILITY;
 
-  const pages = appPages || adminPages || publicRedirectsPages || <ErrorPage />;
+  const pages =
+    appPages ||
+    adminPages ||
+    publicRedirectsPages ||
+    (arePluginsLoading ? <Loading /> : <ErrorPage />);
 
   const user = useAuthUser();
 

src/hooks/useCareApps.tsx

@@ -15,6 +15,8 @@ export type CareAppsContextType = Array<
 
 export const CareAppsContext = createContext<CareAppsContextType | null>(null);
 
+export const CareAppsLoadingContext = createContext<boolean>(false);
+
 export const useCareApps = () => {
   const ctx = useContext(CareAppsContext);
   if (!ctx) {
@@ -25,6 +27,8 @@ export const useCareApps = () => {
   return ctx;
 };
 
+export const useCareAppsLoading = () => useContext(CareAppsLoadingContext);
+
 // export const useCareAppNavItems = () => {
 //   const careApps = useCareApps();
 //   const navItems = careApps.reduce<INavItem[]>((acc, plugin) => {