@taruvi/navkit 0.0.39 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {

package/src/App.tsx

@@ -13,8 +13,9 @@ import taruviLogoWhite from "./assets/taruvi-logo-white.png";
 import type { Client } from "@taruvi/sdk"
 
 const NavkitContent = () => {
-  const { isUserAuthenticated, siteSettings, appSettings, appName, userData, jwtToken, themeMode } = useNavigation();
-  const showTaruviLogo = !appName
+  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, jwtToken, themeMode } = useNavigation();
+  const resolvedAppName = appName || appSettings?.displayName
+  const showTaruviLogo = appSettingsLoaded && !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
   const [showAppLauncher, setShowAppLauncher] = useState<boolean>(false)
   const [showProfileMenu, setShowProfileMenu] = useState<boolean>(false)
@@ -39,16 +40,16 @@ const NavkitContent = () => {
           <Box component={"a"} href="/" sx={styles.leftSection}>
             {showTaruviLogo ? (
               <Box component="img" src={taruviLogoWhite} sx={styles.taruviSpaceLogo} />
-            ) : (
+            ) : appSettingsLoaded ? (
               <>
                 {appSettings?.icon ? <Box component="img" src={appSettings?.icon} sx={styles.logo} /> : <></>}
-                {(appName || appSettings?.displayName) &&
+                {resolvedAppName &&
                   <Typography sx={styles.appName} onClick={() => (window.location.href = "/")}>
-                    {(() => { const name = appName || appSettings!.displayName!; return name.length > 40 ? `${name.substring(0, 40)}...` : name })()}
+                    {resolvedAppName.length > 40 ? `${resolvedAppName.substring(0, 40)}...` : resolvedAppName}
                   </Typography>
                 }
               </>
-            )}
+            ) : null}
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
             <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} />
@@ -130,4 +131,4 @@ const Navkit = ({ client, getTheme, appName }: NavkitProps) => {
   )
 }
 
-export default Navkit
+export default Navkit

package/src/NavkitContext.tsx

@@ -31,7 +31,8 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
     frontendUrl: '',
     enableDarkMode: false,
   })
-  const appSettings = useRef<AppSettings>({})
+  const [appSettings, setAppSettings] = useState<AppSettings>({})
+  const [appSettingsLoaded, setAppSettingsLoaded] = useState<boolean>(false)
 
   const [isDesk, setIsDesk] = useState<boolean>(false)
   const [appsList, setAppsList] = useState<AppData[]>([])
@@ -86,15 +87,19 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
 
     // Fetch app settings to get the app name
     try {
+      setAppSettingsLoaded(false)
       const { data } = appName ? { data: { display_name: appName } } : await new App(client).settings().execute() as { data: { display_name?: string, icon?: string, primary_color?: string, secondary_color?: string } }
-      appSettings.current = {
+      setAppSettings({
         displayName: data?.display_name,
         icon: data?.icon,
         primaryColor: data?.primary_color,
         secondaryColor: data?.secondary_color
-      }
+      })
     } catch {
       // App settings not available, continue without app settings
+      setAppSettings({})
+    } finally {
+      setAppSettingsLoaded(true)
     }
 
     const rawSettings = (fetchedSettings?.data ?? fetchedSettings)?.settings ?? {}
@@ -126,7 +131,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
       }
     }
 
-  }, [client])
+  }, [appName, client])
 
   useLayoutEffect(() => {
     const init = async () => {
@@ -169,7 +174,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
   }, [themeMode, onThemeChange])
 
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings: appSettings.current, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings, appSettingsLoaded, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme }}>
       {children}
     </NavigationContext.Provider>
   )
@@ -181,4 +186,4 @@ export const useNavigation = () => {
     throw new Error('useNavigation must be used within a NavkitProvider')
   }
   return context
-}
+}

package/src/types.ts

@@ -34,6 +34,7 @@ export interface NavigationContextType {
   userData: UserData | null
   siteSettings: SiteSettings
   appSettings: AppSettings
+  appSettingsLoaded: boolean
   appName?: string
   jwtToken: string
   isUserAuthenticated: boolean