Updates for cloud mode.

src/app/(main)/teams/TeamProvider.tsx

@@ -10,7 +10,7 @@ export function TeamProvider({ teamId, children }: { teamId?: string; children:
   const { data: team, isLoading, isFetching } = useTeamQuery(teamId);
 
   if (isFetching && isLoading) {
-    return <Loading position="page" />;
+    return <Loading placement="absolute" />;
   }
 
   if (!team) {

src/app/(main)/teams/TeamsDataTable.tsx

@@ -1,10 +1,10 @@
+import { ReactNode } from 'react';
+import Link from 'next/link';
 import { DataGrid } from '@/components/common/DataGrid';
 import { TeamsTable } from './TeamsTable';
 import { useLoginQuery, useUserTeamsQuery } from '@/components/hooks';
-import { ReactNode } from 'react';
 
 export function TeamsDataTable({
-  allowEdit,
   showActions,
 }: {
   allowEdit?: boolean;
@@ -14,10 +14,18 @@ export function TeamsDataTable({
   const { user } = useLoginQuery();
   const query = useUserTeamsQuery(user.id);
 
+  const renderLink = (row: any) => {
+    return (
+      <Link key={row.id} href={`/teams/${row.id}`}>
+        {row.name}
+      </Link>
+    );
+  };
+
   return (
     <DataGrid query={query}>
       {({ data }) => {
-        return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
+        return <TeamsTable data={data} showActions={showActions} renderLink={renderLink} />;
       }}
     </DataGrid>
   );

src/app/(main)/teams/TeamsHeader.tsx

@@ -1,14 +1,14 @@
 import { Row } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
 import { ROLES } from '@/lib/constants';
-import { useLoginQuery, useMessages } from '@/components/hooks';
+import { useConfig, useLoginQuery, useMessages } from '@/components/hooks';
 import { TeamsJoinButton } from './TeamsJoinButton';
 import { TeamsAddButton } from './TeamsAddButton';
 
 export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
-  const cloudMode = !!process.env.cloudMode;
+  const { cloudMode } = useConfig();
 
   return (
     <PageHeader title={formatMessage(labels.teams)}>

src/app/(main)/teams/TeamsTable.tsx

@@ -1,25 +1,25 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
 import { MenuButton } from '@/components/input/MenuButton';
-import Link from 'next/link';
+import { ReactNode } from 'react';
 
 export function TeamsTable({
   data = [],
   showActions = false,
+  renderLink,
 }: {
   data: any[];
-  allowEdit?: boolean;
   showActions?: boolean;
+  renderLink?: (row: any) => ReactNode;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
 
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={renderUrl(`/settings/teams/${row.id}`)}>{row.name}</Link>}
+        {renderLink}
       </DataColumn>
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
         {(row: any) => row?.members?.find(({ role }) => role === ROLES.teamOwner)?.user?.username}