app/data/providers.ts

@@ -5,19 +5,26 @@ import {accountProvider} from "~/data/account-provider.js";
 import type {SdkProvider} from "~/data/sdk-provider.js";
 import {createPortalAuthProvider} from "~/data/auth-provider.js";
 
-export interface DataProviders {
+interface DataProviders {
     default: SdkProvider;
     auth: AuthProvider;
     [key: string]: SdkProvider | AuthProvider;
 }
 
+let providers: DataProviders;
+
 export function getProviders(sdk: Sdk) {
+    if (providers) {
+        return providers;
+    }
+
     accountProvider.sdk = sdk;
     fileProvider.sdk = sdk;
-
+    providers = {
-    return  {
         default: accountProvider,
         auth: createPortalAuthProvider(sdk),
         files: fileProvider,
     };
+
+    return providers;
 }

app/root.tsx

@@ -1,21 +1,27 @@
-import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
 
 import stylesheet from "./tailwind.css?url";
-import type {LinksFunction} from "@remix-run/node";
+import type { LinksFunction } from "@remix-run/node";
 
 // Supports weights 200-800
 import "@fontsource-variable/manrope";
-import {Refine} from "@refinedev/core";
+import { Refine } from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
-import {notificationProvider} from "~/data/notification-provider";
+import { notificationProvider } from "~/data/notification-provider";
-import {SdkContextProvider, useSdk} from "~/components/lib/sdk-context";
+import { SdkContextProvider, useSdk } from "~/components/lib/sdk-context";
-import {Toaster} from "~/components/ui/toaster";
+import { Toaster } from "~/components/ui/toaster";
-import {getProviders} from "~/data/providers.js";
+import { getProviders } from "~/data/providers.js";
-import {Sdk} from "@lumeweb/portal-sdk";
+import { Sdk } from "@lumeweb/portal-sdk";
 import resources from "~/data/resources.js";
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import {useEffect, useMemo, useState} from "react";
+import { useEffect, useMemo, useState } from "react";
-import {PinningProcess} from "~/data/pinning.js";
+import { PinningProcess } from "~/data/pinning.js";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -52,7 +58,16 @@ function App() {
 
 export default function Root() {
   const [portalUrl, setPortalUrl] = useState(import.meta.env.VITE_PORTAL_URL);
-  const [sdk, setSdk] = useState<Sdk| undefined>(portalUrl ? Sdk.create(portalUrl) : undefined);
+  const sdk = Sdk.create(portalUrl);
+
+  const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
+
+  useEffect(() => {
+    if (sdk) {
+      PinningProcess.setupSdk(sdk as Sdk);
+    }
+  }, [sdk]);
+
   useEffect(() => {
     if (!portalUrl) {
       fetch("/api/meta")
@@ -66,49 +81,28 @@ export default function Root() {
     }
   }, [portalUrl]);
 
-    useEffect(() => {
-        if (portalUrl) {
-            setSdk(Sdk.create(portalUrl));
-        }
-    }, [portalUrl]);
-
   if (!portalUrl) {
     return <p>Loading...</p>;
   }
-
+  
-    return (
+  return (
-        <SdkContextProvider sdk={sdk as Sdk}>
+    <SdkContextProvider sdk={sdk}>
-            <SdkWrapper />
+      <QueryClientProvider client={queryClient}>
-        </SdkContextProvider>
+        <Refine
-    );
+          authProvider={providers.auth}
-}
+          routerProvider={routerProvider}
-
+          notificationProvider={notificationProvider}
-function SdkWrapper() {
+          dataProvider={{
-    const sdk = useSdk();
+            default: providers.default,
-    PinningProcess.setupSdk(sdk as Sdk);
+            files: providers.files,
-
+          }}
-    const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
+          resources={resources}
-
+          options={{ disableTelemetry: true }}>
-    if (!sdk) {
+          <App />
-        return <p>Loading...</p>;
+        </Refine>
-    }
+      </QueryClientProvider>
-
+    </SdkContextProvider>
-    return (
+  );
-        <QueryClientProvider client={queryClient}>
-            <Refine
-                authProvider={providers.auth}
-                routerProvider={routerProvider}
-                notificationProvider={notificationProvider}
-                dataProvider={{
-                    default: providers.default,
-                    files: providers.files,
-                }}
-                resources={resources}
-                options={{disableTelemetry: true}}>
-                <App/>
-            </Refine>
-        </QueryClientProvider>
-    )
 }
 
 export function HydrateFallback() {

package.json

@@ -17,7 +17,7 @@
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@lumeweb/portal-sdk": "0.0.0-20240326154759",
+    "@lumeweb/portal-sdk": "0.0.0-20240322223747",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",