Deploy fixes

apps/dapp/pages/dao/[address]/[[...slug]].tsx

@@ -27,7 +27,7 @@ import {
   useDaoInfoContext,
   useDaoNavHelpers,
 } from '@dao-dao/stateless'
-import { ActionKey, DaoPageMode } from '@dao-dao/types'
+import { ActionKey, DaoPageMode, DaoTabId } from '@dao-dao/types'
 import {
   SITE_URL,
   getDaoPath,
@@ -150,12 +150,16 @@ const InnerDaoHome = () => {
     useFollowingDaos(daoInfo.chainId)
   const following = isFollowing(daoInfo.coreAddress)
 
-  const tabs = useDaoTabs()
-  const firstTabId = tabs[0].id
+  const loadingTabs = useDaoTabs()
+  // Just a type-check because some tabs are loaded at the beginning.
+  const tabs = loadingTabs.loading ? undefined : loadingTabs.data
+  // Default to proposals tab for type-check, but should never happen as some
+  // tabs are loaded at the beginning.
+  const firstTabId = tabs?.[0].id || DaoTabId.Proposals
 
   // Pre-fetch tabs.
   useEffect(() => {
-    tabs.forEach((tab) => {
+    tabs?.forEach((tab) => {
       router.prefetch(getDaoPath(daoInfo.coreAddress, tab.id))
     })
   }, [daoInfo.coreAddress, getDaoPath, router, tabs])
@@ -171,7 +175,7 @@ const InnerDaoHome = () => {
   }, [daoInfo.coreAddress, getDaoPath, router, slug.length, firstTabId])
 
   const tabId =
-    slug.length > 0 && tabs.some(({ id }) => id === slug[0])
+    slug.length > 0 && tabs?.some(({ id }) => id === slug[0])
       ? slug[0]
       : // If tab is invalid, default to first tab.
         firstTabId
@@ -197,7 +201,7 @@ const InnerDaoHome = () => {
       onSelectTabId={onSelectTabId}
       rightSidebarContent={<ProfileDaoHomeCard />}
       selectedTabId={tabId}
-      tabs={tabs}
+      tabs={tabs || []}
     />
   )
 }

apps/sda/pages/[address]/[[...slug]].tsx

@@ -16,20 +16,24 @@ import {
   useDaoInfoContext,
   useDaoNavHelpers,
 } from '@dao-dao/stateless'
-import { DaoPageMode } from '@dao-dao/types'
+import { DaoPageMode, DaoTabId } from '@dao-dao/types'
 import { SITE_URL, getDaoPath } from '@dao-dao/utils'
 
 const DaoHomePage: NextPage = () => {
   const router = useRouter()
   const { coreAddress } = useDaoInfoContext()
   const { getDaoPath } = useDaoNavHelpers()
 
-  const tabs = useDaoTabs()
-  const firstTabId = tabs[0].id
+  const loadingTabs = useDaoTabs()
+  // Just a type-check because some tabs are loaded at the beginning.
+  const tabs = loadingTabs.loading ? undefined : loadingTabs.data
+  // Default to proposals tab for type-check, but should never happen as some
+  // tabs are loaded at the beginning.
+  const firstTabId = tabs?.[0].id || DaoTabId.Proposals
 
   // Pre-fetch tabs.
   useEffect(() => {
-    tabs.forEach((tab) => {
+    tabs?.forEach((tab) => {
       router.prefetch(getDaoPath(coreAddress, tab.id))
     })
   }, [coreAddress, getDaoPath, router, tabs])
@@ -45,15 +49,15 @@ const DaoHomePage: NextPage = () => {
   }, [coreAddress, getDaoPath, router, slug.length, firstTabId])
 
   const selectedTabId =
-    slug.length > 0 && tabs.some(({ id }) => id === slug[0])
+    slug.length > 0 && tabs?.some(({ id }) => id === slug[0])
       ? slug[0]
       : // If tab is invalid, default to first tab.
         firstTabId
 
   return (
     <DaoSdaWrappedTab
       SuspenseLoader={SuspenseLoader}
-      allTabs={tabs}
+      allTabs={tabs || []}
       rightSidebarContent={<ProfileDaoHomeCard />}
       tabId={selectedTabId}
     />

packages/i18n/locales/en/translation.json

@@ -605,6 +605,7 @@
     "tokenAddress": "Token address",
     "tokenContractAddressTitle": "Token contract address",
     "tokenDefinition": "Token definition",
+    "tokenIdentifier": "Token identifier",
     "tokenInfo": "Token info",
     "tokenInstructions": "Token instructions",
     "tokenSwapCreateInstructions": "In this step, you will create the token swap. This creation step describes how many funds each party needs to send for the swap to complete. <2>No funds will be transferred at this time.</2>",
@@ -1438,7 +1439,6 @@
     "timeRemaining": "Time remaining",
     "title": "Title",
     "token": "Token",
-    "tokenIdentifier": "Token identifier",
     "tokenSwap": "Token Swap",
     "topAbsolute": "Top {{count}}",
     "topPercent": "Top {{percent}}%",

packages/stateful/command/contexts/generic/dao.tsx

@@ -39,7 +39,9 @@ export const makeGenericDaoContext: CommandModalContextMaker<{
     const { t } = useTranslation()
     const { getDaoPath, getDaoProposalPath, router } = useDaoNavHelpers()
     const { coreVersion } = useDaoInfoContext()
-    const tabs = useDaoTabs()
+    const loadingTabs = useDaoTabs({
+      suspendWhileLoadingOverride: false,
+    })
 
     const { isFollowing, setFollowing, setUnfollowing, updatingFollowing } =
       useFollowingDaos(chainId)
@@ -72,7 +74,9 @@ export const makeGenericDaoContext: CommandModalContextMaker<{
     const routes = [
       daoPageHref,
       createProposalHref,
-      ...tabs.map(({ id }) => getDaoPath(coreAddress, id)),
+      ...(loadingTabs.loading
+        ? []
+        : loadingTabs.data.map(({ id }) => getDaoPath(coreAddress, id))),
     ]
     useDeepCompareEffect(() => {
       routes.forEach((url) => router.prefetch(url))
@@ -153,16 +157,19 @@ export const makeGenericDaoContext: CommandModalContextMaker<{
           setNavigatingToHref(href)
         }
       },
-      items: tabs.map(({ id, label, Icon }) => {
-        const href = getDaoPath(coreAddress, id)
-
-        return {
-          name: label,
-          Icon,
-          href,
-          loading: navigatingToHref === href,
+      loading: loadingTabs.loading || loadingTabs.updating,
+      items: (loadingTabs.loading ? [] : loadingTabs.data).map(
+        ({ id, label, Icon }) => {
+          const href = getDaoPath(coreAddress, id)
+
+          return {
+            name: label,
+            Icon,
+            href,
+            loading: navigatingToHref === href,
+          }
         }
-      }),
+      ),
     }
 
     const subDaosSection: CommandModalContextSection<CommandModalDaoInfo> = {
@@ -174,7 +181,7 @@ export const makeGenericDaoContext: CommandModalContextMaker<{
             dao,
           })
         ),
-      loading: subDaosLoading.loading,
+      loading: subDaosLoading.loading || subDaosLoading.updating,
       items: subDaosLoading.loading
         ? []
         : subDaosLoading.data.map(

packages/stateful/components/SdaLayout.tsx

@@ -54,15 +54,15 @@ export const SdaLayout = ({ children }: { children: ReactNode }) => {
     daoCreatedCardPropsAtom
   )
 
-  const tabs = useDaoTabs()
+  const loadingTabs = useDaoTabs()
 
   return (
     <StatelessSdaLayout
       connect={connect}
       connectWalletButton={<ConnectWallet variant="secondary" />}
       connected={isWalletConnected}
       navigationProps={{
-        tabs,
+        tabs: loadingTabs.loading ? [] : loadingTabs.data,
         LinkWrapper,
         version: '2.0',
         compact,

packages/stateful/hooks/useDaoTabs.ts

@@ -6,13 +6,15 @@ import {
   QuestionMark,
   WebOutlined,
 } from '@mui/icons-material'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useAppContext } from '@dao-dao/stateless'
 import {
   DaoPageMode,
   DaoTabId,
   DaoTabWithComponent,
+  LoadingData,
   WidgetLocation,
 } from '@dao-dao/types'
 
@@ -27,7 +29,15 @@ import {
 import { useVotingModuleAdapter } from '../voting-module-adapter'
 import { useWidgets } from '../widgets'
 
-export const useDaoTabs = (): DaoTabWithComponent[] => {
+export type UseDaoTabsOptions = {
+  // If defined, will override the default suspendWhileLoading behavior of the
+  // DAO home widgets.
+  suspendWhileLoadingOverride?: boolean
+}
+
+export const useDaoTabs = ({
+  suspendWhileLoadingOverride,
+}: UseDaoTabsOptions = {}): LoadingData<DaoTabWithComponent[]> => {
   const { t } = useTranslation()
 
   const { mode } = useAppContext()
@@ -40,28 +50,14 @@ export const useDaoTabs = (): DaoTabWithComponent[] => {
     // Only load tab widgets.
     location: WidgetLocation.Tab,
   })
-  const widgetTabs = loadingWidgets.loading
-    ? []
-    : loadingWidgets.data.map(
-        ({
-          title,
-          widget: { id, Icon },
-          WidgetComponent,
-        }): DaoTabWithComponent => ({
-          id,
-          label: title,
-          // Icon should always be defined for tab widgets, but just in case...
-          Icon: Icon || QuestionMark,
-          Component: WidgetComponent,
-        })
-      )
 
   // Add home tab with widgets if any widgets exist.
   const loadingDaoHomeWidgets = useWidgets({
     // In dApp, load widgets before rendering to decide if home with widgets is
     // shown so that we know to select home by default when present. In SDA, no
     // need to load widgets before rendering since the home is always shown.
-    suspendWhileLoading: mode === DaoPageMode.Dapp,
+    suspendWhileLoading:
+      suspendWhileLoadingOverride ?? mode === DaoPageMode.Dapp,
     // Only load home widgets.
     location: WidgetLocation.Home,
   })
@@ -75,45 +71,79 @@ export const useDaoTabs = (): DaoTabWithComponent[] => {
       ? DaoWidgets
       : undefined
 
-  return [
-    ...(HomeTab
-      ? [
-          {
-            id: DaoTabId.Home,
-            label: t('title.home'),
-            Component: HomeTab,
-            Icon: HomeOutlined,
-          },
-        ]
-      : []),
-    {
-      id: DaoTabId.Proposals,
-      label: t('title.proposals'),
-      Component: ProposalsTab,
-      Icon: HowToVoteOutlined,
-    },
-    {
-      id: DaoTabId.Treasury,
-      label: t('title.treasuryAndNfts'),
-      Component: TreasuryAndNftsTab,
-      Icon: AccountBalanceWalletOutlined,
-    },
-    {
-      id: DaoTabId.SubDaos,
-      label: t('title.subDaos'),
-      Component: SubDaosTab,
-      Icon: FiberSmartRecordOutlined,
-    },
-    {
-      id: DaoTabId.Apps,
-      label: t('title.apps'),
-      Component: AppsTab,
-      Icon: WebOutlined,
-    },
-    ...(extraTabs?.map(({ labelI18nKey, ...tab }) => ({
-      label: t(labelI18nKey),
-      ...tab,
-    })) ?? []),
-    ...widgetTabs,
-  ]
+  const tabs = useMemo(
+    () => [
+      ...(HomeTab
+        ? [
+            {
+              id: DaoTabId.Home,
+              label: t('title.home'),
+              Component: HomeTab,
+              Icon: HomeOutlined,
+            },
+          ]
+        : []),
+      {
+        id: DaoTabId.Proposals,
+        label: t('title.proposals'),
+        Component: ProposalsTab,
+        Icon: HowToVoteOutlined,
+      },
+      {
+        id: DaoTabId.Treasury,
+        label: t('title.treasuryAndNfts'),
+        Component: TreasuryAndNftsTab,
+        Icon: AccountBalanceWalletOutlined,
+      },
+      {
+        id: DaoTabId.SubDaos,
+        label: t('title.subDaos'),
+        Component: SubDaosTab,
+        Icon: FiberSmartRecordOutlined,
+      },
+      {
+        id: DaoTabId.Apps,
+        label: t('title.apps'),
+        Component: AppsTab,
+        Icon: WebOutlined,
+      },
+      ...(extraTabs?.map(({ labelI18nKey, ...tab }) => ({
+        label: t(labelI18nKey),
+        ...tab,
+      })) ?? []),
+      ...(loadingWidgets.loading
+        ? []
+        : loadingWidgets.data.map(
+            ({
+              title,
+              widget: { id, Icon },
+              WidgetComponent,
+            }): DaoTabWithComponent => ({
+              id,
+              label: title,
+              // Icon should always be defined for tab widgets, but just in case...
+              Icon: Icon || QuestionMark,
+              Component: WidgetComponent,
+            })
+          )),
+    ],
+    [HomeTab, extraTabs, t, loadingWidgets]
+  )
+
+  const updating =
+    loadingWidgets.loading ||
+    loadingWidgets.updating ||
+    loadingDaoHomeWidgets.loading ||
+    loadingDaoHomeWidgets.updating
+
+  return useMemo(
+    () => ({
+      // Some tabs are ready right away, so just use the `updating` field to
+      // indicate if more tabs are still loading.
+      loading: false,
+      updating,
+      data: tabs,
+    }),
+    [updating, tabs]
+  )
 }