fix: barrel imports (#21728)

Avoid importing all components via barrel files that lead to bloated bundles/chunks
2026-10-05 09:25:06 +03:00 · 2024-03-04 18:39:53 +08:00
1 parent 520562f72e
commit 13cfc0abb5
@@ -18,9 +18,9 @@ import {
  saveStorageDebounced,
 } from './SupabaseGrid.utils'
 import { Shortcuts } from './components/common'
-import Footer from './components/footer'
+import Footer from './components/footer/Footer'
 import { Grid } from './components/grid'
-import Header from './components/header'
+import Header from './components/header/Header'
 import { RowContextMenu } from './components/menu'
 import { StoreProvider, useDispatch, useTrackedState } from './store'
 import { SupabaseGridProps } from './types'
@@ -1,4 +1,4 @@
-import Pagination from './pagination'
+import { Pagination } from './pagination'
 import useTable from 'hooks/misc/useTable'
 import { useParams } from 'common'
 import TwoOptionToggle from 'components/ui/TwoOptionToggle'
@@ -1,3 +0,0 @@
-import Footer from './Footer'
-
-export default Footer
@@ -1,3 +1 @@
-import Pagination from './Pagination'
-
-export default Pagination
+export { default as Pagination } from './Pagination'
@@ -1,16 +1,15 @@
 import { Key } from 'react'
 import { TriggerEvent, useContextMenu } from 'react-contexify'
 import { Row, RenderRowProps } from 'react-data-grid'
-import { MENU_IDS } from '../menu'
 import { SupaRow } from '../../types'
+import { ROW_CONTEXT_MENU_ID } from '../menu'

 export default function RowRenderer(key: Key, props: RenderRowProps<SupaRow>) {
  const { show: showContextMenu } = useContextMenu()

  function displayMenu(e: TriggerEvent) {
-    const menuId = MENU_IDS.ROW_CONTEXT_MENU_ID
    showContextMenu(e, {
-      id: menuId,
+      id: ROW_CONTEXT_MENU_ID,
      props: { rowIdx: props.rowIdx },
    })
  }
@@ -32,8 +32,8 @@ import {
  cn,
 } from 'ui'

-import FilterDropdown from './filter'
-import SortPopover from './sort'
+import { FilterPopover } from './filter'
+import { SortPopover } from './sort'

 // [Joshen] CSV exports require this guard as a fail-safe if the table is
 // just too large for a browser to keep all the rows in memory before
@@ -120,7 +120,7 @@ const DefaultHeader = ({
  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-2">
-        <FilterDropdown table={table} filters={filters as string[]} setParams={setParams} />
+        <FilterPopover table={table} filters={filters as string[]} setParams={setParams} />
        <SortPopover table={table} sorts={sorts as string[]} setParams={setParams} />
      </div>
      {canAddNew && (
@@ -1,4 +1,3 @@
-import FilterPopover from './FilterPopover'
+export { default as FilterPopover } from './FilterPopover'

 export * from './Filter.constants'
-export default FilterPopover
@@ -1,3 +0,0 @@
-import Header from './Header'
-
-export default Header
@@ -1,3 +1 @@
-import SortPopover from './SortPopover'
-
-export default SortPopover
+export { default as SortPopover } from './SortPopover'
@@ -6,8 +6,7 @@ import { useCallback } from 'react'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { useTrackedState } from '../../store'
 import { copyToClipboard, formatClipboardValue } from '../../utils'
-
-export const ROW_CONTEXT_MENU_ID = 'row-context-menu-id'
+import { ROW_CONTEXT_MENU_ID } from '.'

 export type RowContextMenuProps = {
  rows: SupaRow[]
@@ -1,6 +1,4 @@
-import ColumnMenu from './ColumnMenu'
-import RowContextMenu, { ROW_CONTEXT_MENU_ID } from './RowContextMenu'
+export { default as ColumnMenu } from './ColumnMenu'
+export { default as RowContextMenu } from './RowContextMenu'

-const MENU_IDS = { ROW_CONTEXT_MENU_ID }
-
-export { ColumnMenu, RowContextMenu, MENU_IDS }
+export const ROW_CONTEXT_MENU_ID = 'row-context-menu-id'
@@ -2,6 +2,4 @@ export * from './SupabaseGrid'
 export { parseSupaTable } from './SupabaseGrid.utils'
 export * from './types'

-import Query from './query'
-
-export { Query }
+export { Query } from './query/Query'
@@ -1,3 +0,0 @@
-import { Query } from './Query'
-
-export default Query
@@ -1,7 +1,7 @@
-import BaseReducer, { BaseInitialState, baseInitialState } from './base'
-import CallbackReducer, { CallbackInitialState, callbackInitialState } from './callback'
-import ColumnReducer, { ColumnInitialState, columnInitialState } from './column'
-import RowReducer, { RowInitialState, rowInitialState } from './row'
+import BaseReducer, { type BaseInitialState, baseInitialState } from './base'
+import CallbackReducer, { type CallbackInitialState, callbackInitialState } from './callback'
+import ColumnReducer, { type ColumnInitialState, columnInitialState } from './column'
+import RowReducer, { type RowInitialState, rowInitialState } from './row'

 export interface InitialStateType
  extends BaseInitialState,
@@ -1,13 +1,5 @@
-import AccountInformation from './AccountInformation'
-import AnalyticsSettings from './AnalyticsSettings'
-import ThemeSettingsOld from './ThemeSettingsOld'
-import ThemeSettings from './ThemeSettings'
-import ThemeSettingsWithPreferredTheme from './ThemeSettingsWithPreferredTheme'
-
-export {
-  AccountInformation,
-  AnalyticsSettings,
-  ThemeSettingsOld,
-  ThemeSettings,
-  ThemeSettingsWithPreferredTheme,
-}
+export { default as AccountInformation } from './AccountInformation'
+export { default as AnalyticsSettings } from './AnalyticsSettings'
+export { default as ThemeSettingsOld } from './ThemeSettingsOld'
+export { default as ThemeSettings } from './ThemeSettings'
+export { default as ThemeSettingsWithPreferredTheme } from './ThemeSettingsWithPreferredTheme'
@@ -1,7 +1,5 @@
-import AccessTokenList from './AccessTokenList'
-import AuditLogs from './AuditLogs'
-import NewAccessTokenButton from './NewAccessTokenButton'
-import NewTokenBanner from './NewTokenBanner'
-import TOTPFactors from './TOTPFactors'
-
-export { AccessTokenList, NewTokenBanner, NewAccessTokenButton, TOTPFactors, AuditLogs }
+export { default as AccessTokenList } from './AccessTokenList'
+export { default as AuditLogs } from './AuditLogs'
+export { default as NewAccessTokenButton } from './NewAccessTokenButton'
+export { default as NewTokenBanner } from './NewTokenBanner'
+export { default as TOTPFactors } from './TOTPFactors'
@@ -1,4 +0,0 @@
-import { FeaturePreviewContextProvider } from './FeaturePreviewContext'
-import FeaturePreviewModal from './FeaturePreviewModal'
-
-export { FeaturePreviewContextProvider, FeaturePreviewModal }
@@ -1,5 +1,3 @@
-import AppBannerWrapper from './AppBannerWrapper'
-import CommandMenuWrapper from './CommandMenuWrapper'
-import RouteValidationWrapper from './RouteValidationWrapper'
-
-export { AppBannerWrapper, CommandMenuWrapper, RouteValidationWrapper }
+export { default as AppBannerWrapper } from './AppBannerWrapper'
+export { default as CommandMenuWrapper } from './CommandMenuWrapper'
+export { default as RouteValidationWrapper } from './RouteValidationWrapper'
@@ -1,4 +1,2 @@
-import FilterPopover from './FilterPopover'
-import LogDetailsPanel from './LogDetailsPanel'
-
-export { FilterPopover, LogDetailsPanel }
+export { default as FilterPopover } from './FilterPopover'
+export { default as LogDetailsPanel } from './LogDetailsPanel'
@@ -13,7 +13,7 @@ import {
  AlertTitle_Shadcn_,
 } from 'ui'

-import CodeEditor from 'components/ui/CodeEditor'
+import { CodeEditor } from 'components/ui/CodeEditor'
 import { FormActions, FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import InformationBox from 'components/ui/InformationBox'

@@ -1,2 +1 @@
-import Users from './Users'
-export default Users
+export { default as Users } from './Users'
@@ -1,16 +1,5 @@
-import AuthProvidersForm from './AuthProvidersForm/AuthProvidersForm'
-import EmailTemplates from './EmailTemplates/EmailTemplates'
-import SmtpForm from './SmtpForm/SmtpForm'
-import BasicAuthSettingsForm from './BasicAuthSettingsForm/BasicAuthSettingsForm'
-import AdvancedAuthSettingsForm from './AdvancedAuthSettingsForm/AdvancedAuthSettingsForm'
-
-import Users from './Users'
-
-export {
-  Users,
-  AuthProvidersForm,
-  EmailTemplates,
-  SmtpForm,
-  BasicAuthSettingsForm,
-  AdvancedAuthSettingsForm,
-}
+export { default as AuthProvidersForm } from './AuthProvidersForm/AuthProvidersForm'
+export { default as EmailTemplates } from './EmailTemplates/EmailTemplates'
+export { default as SmtpForm } from './SmtpForm/SmtpForm'
+export { default as BasicAuthSettingsForm } from './BasicAuthSettingsForm/BasicAuthSettingsForm'
+export { default as AdvancedAuthSettingsForm } from './AdvancedAuthSettingsForm/AdvancedAuthSettingsForm'
@@ -1,5 +1,3 @@
-import CPUWarnings from './CPUWarnings'
-import DiskIOBandwidthWarnings from './DiskIOBandwidthWarnings'
-import RAMWarnings from './RAMWarnings'
-
-export { CPUWarnings, DiskIOBandwidthWarnings, RAMWarnings }
+export { default as CPUWarnings } from './CPUWarnings'
+export { default as DiskIOBandwidthWarnings } from './DiskIOBandwidthWarnings'
+export { default as RAMWarnings } from './RAMWarnings'
@@ -1,4 +1,2 @@
-import PITRNotice from './PITRNotice'
-import PITRSelection from './PITRSelection'
-
-export { PITRNotice, PITRSelection }
+export { default as PITRNotice } from './PITRNotice'
+export { default as PITRSelection } from './PITRSelection'
@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { Button, Input, Listbox, SidePanel } from 'ui'

 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import CodeEditor from 'components/ui/CodeEditor'
+import { CodeEditor } from 'components/ui/CodeEditor'
 import MultiSelect, { MultiSelectOption } from 'components/ui/MultiSelect'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useIndexesQuery } from 'data/database/indexes-query'
@@ -19,7 +19,7 @@ import {
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
-import CodeEditor from 'components/ui/CodeEditor'
+import { CodeEditor } from 'components/ui/CodeEditor'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import ShimmeringLoader, { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
@@ -6,7 +6,7 @@ import { Alert, Button, IconExternalLink, IconSearch, Input, SidePanel } from 'u

 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
-import CodeEditor from 'components/ui/CodeEditor'
+import { CodeEditor } from 'components/ui/CodeEditor'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { DatabaseMigration, useMigrationsQuery } from 'data/database/migrations-query'
 import MigrationsEmptyState from './MigrationsEmptyState'
@@ -7,7 +7,7 @@ import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import InformationBox from 'components/ui/InformationBox'
-import Connecting from 'components/ui/Loading/Loading'
+import { Loading } from 'components/ui/Loading'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useCheckPermissions } from 'hooks'
 import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
@@ -83,7 +83,7 @@ const PublicationsTables = ({ selectedPublication, onSelectBack }: PublicationsT
      </div>
      {isLoading && (
        <div className="mt-8">
-          <Connecting />
+          <Loading />
        </div>
      )}

@@ -16,7 +16,7 @@ import {
  FormSectionContent,
  FormSectionLabel,
 } from 'components/ui/Forms'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { invalidateSchemasQuery } from 'data/database/schemas-query'
 import { useFDWUpdateMutation } from 'data/fdw/fdw-update-mutation'
 import { useFDWsQuery } from 'data/fdw/fdws-query'
@@ -1,41 +1,23 @@
-import ColumnList from './Tables/ColumnList'
-import TableList from './Tables/TableList'
+export { default as ColumnList } from './Tables/ColumnList'
+export { default as TableList } from './Tables/TableList'

-import RolesList from './Roles/RolesList'
+export { default as RolesList } from './Roles/RolesList'

-import Extensions from './Extensions/Extensions'
+export { default as Extensions } from './Extensions/Extensions'

-import CreateWrapper from './Wrappers/CreateWrapper'
-import EditWrapper from './Wrappers/EditWrapper'
-import Wrappers from './Wrappers/Wrappers'
+export { default as CreateWrapper } from './Wrappers/CreateWrapper'
+export { default as EditWrapper } from './Wrappers/EditWrapper'
+export { default as Wrappers } from './Wrappers/Wrappers'

-import PublicationsList from './Publications/PublicationsList'
-import PublicationsTables from './Publications/PublicationsTables'
+export { default as PublicationsList } from './Publications/PublicationsList'
+export { default as PublicationsTables } from './Publications/PublicationsTables'

-import BackupsList from './Backups/BackupsList'
+export { default as BackupsList } from './Backups/BackupsList'

-import CreateTrigger from './Triggers/CreateTrigger'
-import DeleteTrigger from './Triggers/DeleteTrigger'
+export { default as CreateTrigger } from './Triggers/CreateTrigger'
+export { default as DeleteTrigger } from './Triggers/DeleteTrigger'

-import CreateFunction from './Functions/CreateFunction'
-import DeleteFunction from './Functions/DeleteFunction'
+export { default as CreateFunction } from './Functions/CreateFunction'
+export { default as DeleteFunction } from './Functions/DeleteFunction'

-import EnumeratedTypes from './EnumeratedTypes/EnumeratedTypes'
-
-export {
-  BackupsList,
-  ColumnList,
-  CreateFunction,
-  CreateTrigger,
-  CreateWrapper,
-  DeleteFunction,
-  DeleteTrigger,
-  EditWrapper,
-  EnumeratedTypes,
-  Extensions,
-  PublicationsList,
-  PublicationsTables,
-  RolesList,
-  TableList,
-  Wrappers,
-}
+export { default as EnumeratedTypes } from './EnumeratedTypes/EnumeratedTypes'
@@ -1,5 +1,3 @@
-import GeneralContent from './GeneralContent'
-import ResourceContent from './ResourceContent'
-import RpcContent from './RpcContent'
-
-export { GeneralContent, ResourceContent, RpcContent }
+export { default as GeneralContent } from './GeneralContent'
+export { default as ResourceContent } from './ResourceContent'
+export { default as RpcContent } from './RpcContent'
@@ -1,6 +1,4 @@
-import EdgeFunctionDetails from './EdgeFunctionDetails/EdgeFunctionDetails'
-import EdgeFunctionsListItem from './EdgeFunctionsListItem'
-import FunctionsEmptyState from './FunctionsEmptyState'
-import TerminalInstructions from './TerminalInstructions'
-
-export { EdgeFunctionDetails, EdgeFunctionsListItem, FunctionsEmptyState, TerminalInstructions }
+export { default as EdgeFunctionDetails } from './EdgeFunctionDetails/EdgeFunctionDetails'
+export { default as EdgeFunctionsListItem } from './EdgeFunctionsListItem'
+export { default as FunctionsEmptyState } from './FunctionsEmptyState'
+export { default as TerminalInstructions } from './TerminalInstructions'
@@ -1,3 +1 @@
-import ProjectList from './ProjectList'
-
-export default ProjectList
+export { default as ProjectList } from './ProjectList'
@@ -1,5 +1,3 @@
-import ClientLibrary from './ClientLibrary'
-import ExampleProject from './ExampleProject'
-import NewProjectPanel from './NewProjectPanel/NewProjectPanel'
-
-export { ClientLibrary, ExampleProject, NewProjectPanel }
+export { default as ClientLibrary } from './ClientLibrary'
+export { default as ExampleProject } from './ExampleProject'
+export { default as NewProjectPanel } from './NewProjectPanel/NewProjectPanel'
@@ -1,5 +1,3 @@
-import NotOrganizationOwnerWarning from './NotOrganizationOwnerWarning'
-import FreeProjectLimitWarning from './FreeProjectLimitWarning'
-import EmptyPaymentMethodWarning from './EmptyPaymentMethodWarning'
-
-export { NotOrganizationOwnerWarning, FreeProjectLimitWarning, EmptyPaymentMethodWarning }
+export { default as NotOrganizationOwnerWarning } from './NotOrganizationOwnerWarning'
+export { default as FreeProjectLimitWarning } from './FreeProjectLimitWarning'
+export { default as EmptyPaymentMethodWarning } from './EmptyPaymentMethodWarning'
@@ -1,23 +1,10 @@
-import BillingSettings from './BillingSettings/BillingSettings'
-import GeneralSettings from './GeneralSettings/GeneralSettings'
-import IntegrationSettings from './IntegrationSettings/IntegrationSettings'
-import InvoicesSettings from './InvoicesSettings/InvoicesSettings'
-import NewOrgForm from './NewOrg/NewOrgForm'
-import Usage from './Usage/Usage'
-import AuditLogs from './AuditLogs/AuditLogs'
-import OAuthApps from './OAuthApps/OAuthApps'
-import TeamSettings from './TeamSettings/TeamSettings'
-import Documents from './Documents/Documents'
-
-export {
-  BillingSettings,
-  GeneralSettings,
-  IntegrationSettings,
-  InvoicesSettings,
-  NewOrgForm,
-  OAuthApps,
-  AuditLogs,
-  TeamSettings,
-  Usage,
-  Documents,
-}
+export { default as BillingSettings } from './BillingSettings/BillingSettings'
+export { default as GeneralSettings } from './GeneralSettings/GeneralSettings'
+export { default as IntegrationSettings } from './IntegrationSettings/IntegrationSettings'
+export { default as InvoicesSettings } from './InvoicesSettings/InvoicesSettings'
+export { default as NewOrgForm } from './NewOrg/NewOrgForm'
+export { default as Usage } from './Usage/Usage'
+export { default as AuditLogs } from './AuditLogs/AuditLogs'
+export { default as OAuthApps } from './OAuthApps/OAuthApps'
+export { default as TeamSettings } from './TeamSettings/TeamSettings'
+export { default as Documents } from './Documents/Documents'
@@ -1,26 +1,12 @@
-import EdgeFunctions from './EdgeFunctions'
-import Entities from './Entities'
-import Introduction from './Introduction'
-import Realtime from './Realtime'
-import Storage from './Storage'
-import StoredProcedures from './StoredProcedures'
-import UserManagement from './UserManagement'
+export { default as EdgeFunctions } from './EdgeFunctions'
+export { default as Entities } from './Entities'
+export { default as Introduction } from './Introduction'
+export { default as Realtime } from './Realtime'
+export { default as Storage } from './Storage'
+export { default as StoredProcedures } from './StoredProcedures'
+export { default as UserManagement } from './UserManagement'

-import Bucket from './Bucket'
-import EdgeFunction from './EdgeFunction'
-import Entity from './Entity'
-import RPC from './RPC'
-
-export {
-  Bucket,
-  EdgeFunction,
-  EdgeFunctions,
-  Entities,
-  Entity,
-  Introduction,
-  RPC,
-  Realtime,
-  Storage,
-  StoredProcedures,
-  UserManagement,
-}
+export { default as Bucket } from './Bucket'
+export { default as EdgeFunction } from './EdgeFunction'
+export { default as Entity } from './Entity'
+export { default as RPC } from './RPC'
@@ -1,6 +1,6 @@
 import { Input, Modal } from 'ui'

-import CodeEditor from 'components/ui/CodeEditor'
+import { CodeEditor } from 'components/ui/CodeEditor'
 import { useEffect, useState } from 'react'
 import { tryParseJson } from 'lib/helpers'

@@ -24,7 +24,7 @@ import {

 import { useParams } from 'common/hooks'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, useIsFeatureEnabled } from 'hooks'
 import { METRICS, METRIC_CATEGORIES, TIME_PERIODS_REPORTS } from 'lib/constants/metrics'
@@ -1,5 +1,3 @@
-import { ConnectionPooling } from './ConnectionPooling/ConnectionPooling'
-import NetworkRestrictions from './NetworkRestrictions/NetworkRestrictions'
-import DatabaseSettings from './DatabaseSettings/DatabaseSettings'
-
-export { ConnectionPooling, DatabaseSettings, NetworkRestrictions }
+export { ConnectionPooling } from './ConnectionPooling/ConnectionPooling'
+export { default as NetworkRestrictions } from './NetworkRestrictions/NetworkRestrictions'
+export { default as DatabaseSettings } from './DatabaseSettings/DatabaseSettings'
@@ -16,7 +16,7 @@ import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-e
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useSelectedOrganization } from 'hooks'
 import PauseProjectButton from './PauseProjectButton'
-import ProjectUpgradeAlert from './ProjectUpgradeAlert'
+import { ProjectUpgradeAlert } from './ProjectUpgradeAlert'
 import RestartServerButton from './RestartServerButton'

 interface InfrastructureProps {}
@@ -1,2 +1 @@
-import ProjectUpgradeAlert from './ProjectUpgradeAlert'
-export default ProjectUpgradeAlert
+export { default as ProjectUpgradeAlert } from './ProjectUpgradeAlert'
@@ -1,17 +1,7 @@
-import General from './General'
-import Infrastructure from './Infrastructure/Infrastructure'
-import CustomDomainConfig from './CustomDomainConfig/CustomDomainConfig'
-import DeleteProjectPanel from './DeleteProjectPanel/DeleteProjectPanel'
-import DeleteProjectButton from './DeleteProjectPanel/DeleteProjectButton'
-import TransferProjectButton from './TransferProjectPanel/TransferProjectButton'
-import TransferProjectPanel from './TransferProjectPanel/TransferProjectPanel'
-
-export {
-  General,
-  Infrastructure,
-  CustomDomainConfig,
-  DeleteProjectPanel,
-  DeleteProjectButton,
-  TransferProjectPanel,
-  TransferProjectButton,
-}
+export { default as General } from './General'
+export { default as Infrastructure } from './Infrastructure/Infrastructure'
+export { default as CustomDomainConfig } from './CustomDomainConfig/CustomDomainConfig'
+export { default as DeleteProjectPanel } from './DeleteProjectPanel/DeleteProjectPanel'
+export { default as DeleteProjectButton } from './DeleteProjectPanel/DeleteProjectButton'
+export { default as TransferProjectButton } from './TransferProjectPanel/TransferProjectButton'
+export { default as TransferProjectPanel } from './TransferProjectPanel/TransferProjectPanel'
@@ -25,7 +25,7 @@ import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-e
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { useIsFeatureEnabled } from 'hooks'
 import { AWS_REGIONS, FLY_REGIONS } from 'lib/constants'
-import ProjectUpgradeAlert from '../General/Infrastructure/ProjectUpgradeAlert'
+import { ProjectUpgradeAlert } from '../General/Infrastructure/ProjectUpgradeAlert'
 import InstanceConfiguration from './InfrastructureConfiguration/InstanceConfiguration'
 import {
  AWS_REGIONS_VALUES,
@@ -1,7 +1,7 @@
 import { Button, IconX } from 'ui'

 import CopyButton from 'components/ui/CopyButton'
-import Connecting from 'components/ui/Loading/Loading'
+import { Loading } from 'components/ui/Loading'
 import useSingleLog from 'hooks/analytics/useSingleLog'
 import { useMemo } from 'react'
 import {
@@ -170,7 +170,7 @@ ${JSON.stringify(fullLog.metadata, null, 2)}
          </div>
          <div className="h-px w-full bg-selection rounded " />
        </div>
-        {isLoading && <Connecting />}
+        {isLoading && <Loading />}
        <div className="flex flex-col space-y-6 bg-surface-100 py-4">
          {!isLoading && <Formatter />}
        </div>
@@ -1,6 +1,4 @@
-import VaultToggle from './VaultToggle'
-import SecretsManagement from './Secrets/SecretsManagement'
-import EncryptionKeySelector from './Keys/EncryptionKeySelector'
-import EncryptionKeysManagement from './Keys/EncryptionKeysManagement'
-
-export { VaultToggle, SecretsManagement, EncryptionKeySelector, EncryptionKeysManagement }
+export { default as VaultToggle } from './VaultToggle'
+export { default as SecretsManagement } from './Secrets/SecretsManagement'
+export { default as EncryptionKeySelector } from './Keys/EncryptionKeySelector'
+export { default as EncryptionKeysManagement } from './Keys/EncryptionKeysManagement'
@@ -1,3 +1 @@
-import DateTimeInput from './DateTimeInput'
-
-export default DateTimeInput
+export { default as DateTimeInput } from './DateTimeInput'
@@ -7,8 +7,8 @@ import { IconLoader, SidePanel } from 'ui'
 import { parseSupaTable } from 'components/grid'
 import { formatFilterURLParams, formatSortURLParams } from 'components/grid/SupabaseGrid.utils'
 import RefreshButton from 'components/grid/components/header/RefreshButton'
-import FilterPopover from 'components/grid/components/header/filter'
-import SortPopover from 'components/grid/components/header/sort'
+import { FilterPopover } from 'components/grid/components/header/filter'
+import { SortPopover } from 'components/grid/components/header/sort'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ForeignKeyConstraint } from 'data/database/foreign-key-constraints-query'
 import { useTableRowsQuery } from 'data/table-rows/table-rows-query'
@@ -2,7 +2,7 @@ import { includes, noop } from 'lodash'
 import { Button, IconEdit2, IconLink, Input, Listbox, Select } from 'ui'

 import { DATETIME_TYPES, JSON_TYPES, TEXT_TYPES } from '../SidePanelEditor.constants'
-import DateTimeInput from './DateTimeInput'
+import { DateTimeInput } from './DateTimeInput'
 import { RowField } from './RowEditor.types'

 export interface InputFieldProps {
@@ -1,3 +1 @@
-import DrilldownViewer from './DrilldownViewer'
-
-export default DrilldownViewer
+export { default as DrilldownViewer } from './DrilldownViewer'
@@ -6,7 +6,7 @@ import TwoOptionToggle from 'components/ui/TwoOptionToggle'
 import { minifyJSON, prettifyJSON, tryParseJson, removeJSONTrailingComma } from 'lib/helpers'
 import toast from 'react-hot-toast'
 import ActionBar from '../../ActionBar'
-import DrilldownViewer from './DrilldownViewer'
+import { DrilldownViewer } from './DrilldownViewer'
 import JsonCodeEditor from './JsonCodeEditor'

 interface JsonEditProps {
@@ -1,3 +1 @@
-import JsonEditor from './JsonEditor'
-
-export default JsonEditor
+export { default as JsonEditor } from './JsonEditor'
@@ -10,7 +10,7 @@ import ActionBar from '../ActionBar'
 import ForeignRowSelector from './ForeignRowSelector/ForeignRowSelector'
 import HeaderTitle from './HeaderTitle'
 import InputField from './InputField'
-import JsonEdit from './JsonEditor'
+import { JsonEditor } from './JsonEditor'
 import { JsonEditValue, RowField } from './RowEditor.types'
 import {
  generateRowFields,
@@ -190,7 +190,7 @@ const RowEditor = ({
                </SidePanel.Content>
              </>
            )}
-            <JsonEdit
+            <JsonEditor
              visible={isEditingJson}
              column={selectedValueForJsonEdit?.column ?? ''}
              jsonString={selectedValueForJsonEdit?.jsonString ?? ''}
@@ -24,7 +24,7 @@ import { Dictionary } from 'types'
 import { ColumnEditor, RowEditor, SpreadsheetImport, TableEditor } from '.'
 import { ForeignKey } from './ForeignKeySelector/ForeignKeySelector.types'
 import ForeignRowSelector from './RowEditor/ForeignRowSelector/ForeignRowSelector'
-import JsonEdit from './RowEditor/JsonEditor/JsonEditor'
+import JsonEditor from './RowEditor/JsonEditor/JsonEditor'
 import { TextEditor } from './RowEditor/TextEditor'
 import SchemaEditor from './SchemaEditor'
 import { ColumnField, CreateColumnPayload, UpdateColumnPayload } from './SidePanelEditor.types'
@@ -608,7 +608,7 @@ const SidePanelEditor = ({
        updateEditorDirty={() => setIsEdited(true)}
      />
      <SchemaEditor visible={snap.sidePanel?.type === 'schema'} closePanel={onClosePanel} />
-      <JsonEdit
+      <JsonEditor
        visible={snap.sidePanel?.type === 'json'}
        column={(snap.sidePanel?.type === 'json' && snap.sidePanel.jsonValue.column) || ''}
        jsonString={(snap.sidePanel?.type === 'json' && snap.sidePanel.jsonValue.jsonString) || ''}
@@ -1,8 +1,5 @@
-import SidePanelEditor from './SidePanelEditor'
-import RowEditor from './RowEditor/RowEditor'
-import ColumnEditor from './ColumnEditor/ColumnEditor'
-import TableEditor from './TableEditor/TableEditor'
-import SpreadsheetImport from './SpreadsheetImport/SpreadsheetImport'
-
-export { RowEditor, ColumnEditor, TableEditor, SpreadsheetImport }
-export default SidePanelEditor
+export { default as SidePanelEditor } from './SidePanelEditor'
+export { default as RowEditor } from './RowEditor/RowEditor'
+export { default as ColumnEditor } from './ColumnEditor/ColumnEditor'
+export { default as TableEditor } from './TableEditor/TableEditor'
+export { default as SpreadsheetImport } from './SpreadsheetImport/SpreadsheetImport'
@@ -14,7 +14,7 @@ import useEntityType from 'hooks/misc/useEntityType'
 import { timeout } from 'lib/helpers'
 import Link from 'next/link'
 import { Button } from 'ui'
-import Footer from 'components/grid/components/footer'
+import Footer from 'components/grid/components/footer/Footer'

 export interface TableDefinitionProps {
  id?: number
@@ -9,7 +9,7 @@ import { useRouter } from 'next/router'
 import { parseSupaTable, SupabaseGrid, SupaTable } from 'components/grid'
 import { ERROR_PRIMARY_KEY_NOTFOUND } from 'components/grid/constants'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import Connecting from 'components/ui/Loading/Loading'
+import { Loading } from 'components/ui/Loading'
 import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constants'
 import {
  ForeignKeyConstraint,
@@ -28,7 +28,7 @@ import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { Dictionary, SchemaView } from 'types'
 import GridHeaderActions from './GridHeaderActions'
 import NotFoundState from './NotFoundState'
-import SidePanelEditor from './SidePanelEditor'
+import { SidePanelEditor } from './SidePanelEditor'
 import { useEncryptedColumns } from './SidePanelEditor/SidePanelEditor.utils'
 import TableDefinition from './TableDefinition'

@@ -134,7 +134,7 @@ const TableGridEditor = ({

  // NOTE: DO NOT PUT HOOKS AFTER THIS LINE
  if (isLoadingSelectedTable) {
-    return <Connecting />
+    return <Loading />
  }

  if (isUndefined(selectedTable)) {
@@ -1,6 +1,3 @@
-import TableGridEditor from './TableGridEditor'
-import SidePanelEditor from './SidePanelEditor'
-import EmptyState from './EmptyState'
-
-export { EmptyState, SidePanelEditor }
-export default TableGridEditor
+export { default as TableGridEditor } from './TableGridEditor'
+export { default as SidePanelEditor } from './SidePanelEditor/SidePanelEditor'
+export { default as EmptyState } from './EmptyState'
@@ -1,5 +0,0 @@
-import TableGridEditor from './TableGridEditor'
-
-export * from './Auth'
-
-export { TableGridEditor }
@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { Badge, IconArrowUpRight, IconLogOut, Menu } from 'ui'

 import { useFlag } from 'hooks'
-import LayoutHeader from '../ProjectLayout/LayoutHeader'
+import { LayoutHeader } from '../ProjectLayout/LayoutHeader'
 import { SidebarLink, SidebarSection } from './AccountLayout.types'

 interface WithSidebarProps {
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'

 import { useSelectedOrganization, useSelectedProject } from 'hooks'
-import FeedbackDropdown from '../ProjectLayout/LayoutHeader/FeedbackDropdown'
+import { FeedbackDropdown } from '../ProjectLayout/LayoutHeader/FeedbackDropdown'
 import HelpPopover from '../ProjectLayout/LayoutHeader/HelpPopover'
 import NotificationsPopoverV2 from '../ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover'
 import BranchDropdown from './BranchDropdown'
@@ -3,10 +3,10 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'

 import { useIsColumnLevelPrivilegesEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import ProductMenu from 'components/ui/ProductMenu'
+import { ProductMenu } from 'components/ui/ProductMenu'
 import { useAuthConfigPrefetch } from 'data/auth/auth-config-query'
 import { withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import { generateAuthMenu } from './AuthLayout.utils'

 export interface AuthLayoutProps {
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'

-import BaseLayout from 'components/layouts'
+import { ProjectLayout } from 'components/layouts'
 import { useSelectedOrganization, useSelectedProject, withAuth } from 'hooks'
 import { IconX } from 'ui'

@@ -12,7 +12,7 @@ const BillingLayout = ({ children }: PropsWithChildren<BillingLayoutProps>) => {
  const selectedProject = useSelectedProject()

  return (
-    <BaseLayout hideHeader hideIconBar>
+    <ProjectLayout hideHeader hideIconBar>
      <div className="flex h-full w-full flex-col">
        {/* Header */}
        <div className="flex items-center space-x-4 border-b py-4 px-5 border-default">
@@ -50,7 +50,7 @@ const BillingLayout = ({ children }: PropsWithChildren<BillingLayoutProps>) => {
          <section className="relative">{children}</section>
        </div>
      </div>
-    </BaseLayout>
+    </ProjectLayout>
  )
 }

@@ -2,11 +2,11 @@ import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'

-import ProductMenu from 'components/ui/ProductMenu'
+import { ProductMenu } from 'components/ui/ProductMenu'
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useSelectedProject, withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import { generateDatabaseMenu } from './DatabaseMenu.utils'

 export interface DatabaseLayoutProps {
@@ -5,11 +5,11 @@ import { ReactElement } from 'react'
 import { useParams } from 'common'
 import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import Error from 'components/ui/Error'
-import ProductMenu from 'components/ui/ProductMenu'
+import { ProductMenu } from 'components/ui/ProductMenu'
 import { useOpenAPISpecQuery } from 'data/open-api/api-spec-query'
 import { useIsFeatureEnabled, useSelectedProject, withAuth } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import { generateDocsMenu } from './DocsLayout.utils'

 function DocsLayout({ title, children }: { title: string; children: ReactElement }) {
@@ -12,7 +12,7 @@ import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query'
 import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
 import { useCheckPermissions, withAuth } from 'hooks'
 import FunctionsNav from '../interfaces/Functions/FunctionsNav'
-import ProjectLayout from './'
+import { ProjectLayout } from './'

 interface FunctionsLayoutProps {
  title?: string
@@ -3,9 +3,9 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'

 import NoPermission from 'components/ui/NoPermission'
-import ProductMenu from 'components/ui/ProductMenu'
+import { ProductMenu } from 'components/ui/ProductMenu'
 import { useCheckPermissions, useIsFeatureEnabled, useSelectedProject, withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import { generateLogsMenu } from './LogsMenu.utils'

 interface LogsLayoutProps {
@@ -1,3 +1 @@
-import FeedbackDropdown from './FeedbackDropdown'
-
-export default FeedbackDropdown
+export { default as FeedbackDropdown } from './FeedbackDropdown'
@@ -13,7 +13,7 @@ import { useOrgUsageQuery } from 'data/usage/org-usage-query'
 import { useSelectedOrganization, useSelectedProject } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
 import BreadcrumbsView from './BreadcrumbsView'
-import FeedbackDropdown from './FeedbackDropdown'
+import { FeedbackDropdown } from './FeedbackDropdown'
 import HelpPopover from './HelpPopover'
 import NotificationsPopoverV2 from './NotificationsPopoverV2/NotificationsPopover'

@@ -1,3 +1 @@
-import LayoutHeader from './LayoutHeader'
-
-export default LayoutHeader
+export { default as LayoutHeader } from './LayoutHeader'
@@ -5,7 +5,7 @@ import { Fragment, PropsWithChildren, ReactNode, useEffect } from 'react'

 import ProjectAPIDocs from 'components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
 import AISettingsModal from 'components/ui/AISettingsModal'
-import Connecting from 'components/ui/Loading/Loading'
+import { Loading } from 'components/ui/Loading'
 import ResourceExhaustionWarningBanner from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
 import { useFlag, useSelectedOrganization, useSelectedProject, withAuth } from 'hooks'
 import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
@@ -14,7 +14,7 @@ import AppLayout from '../AppLayout/AppLayout'
 import EnableBranchingModal from '../AppLayout/EnableBranchingButton/EnableBranchingModal'
 import BuildingState from './BuildingState'
 import ConnectingState from './ConnectingState'
-import LayoutHeader from './LayoutHeader'
+import { LayoutHeader } from './LayoutHeader'
 import LoadingState from './LoadingState'
 import NavigationBar from './NavigationBar/NavigationBar'
 import PausingState from './PausingState'
@@ -22,7 +22,7 @@ import ProductMenuBar from './ProductMenuBar'
 import { ProjectContextProvider } from './ProjectContext'
 import ProjectPausedState from './ProjectPausedState'
 import RestoringState from './RestoringState'
-import UpgradingState from './UpgradingState'
+import { UpgradingState } from './UpgradingState'
 import { ResizableHandle, ResizablePanelGroup, ResizablePanel, cn } from 'ui'

 // [Joshen] This is temporary while we unblock users from managing their project
@@ -236,7 +236,7 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
  }, [ref])

  if (isBlocking && (isLoading || (requiresProjectDetails && selectedProject === undefined))) {
-    return router.pathname.endsWith('[ref]') ? <LoadingState /> : <Connecting />
+    return router.pathname.endsWith('[ref]') ? <LoadingState /> : <Loading />
  }

  if (isProjectUpgrading) {
@@ -1,2 +1 @@
-import UpgradingState from './UpgradingState'
-export default UpgradingState
+export { default as UpgradingState } from './UpgradingState'
@@ -5,8 +5,8 @@ import { PropsWithChildren } from 'react'
 import { generateSettingsMenu } from './SettingsMenu.utils'

 import { useParams } from 'common'
-import ProductMenu from 'components/ui/ProductMenu'
-import ProjectLayout from '..'
+import { ProductMenu } from 'components/ui/ProductMenu'
+import { ProjectLayout } from '..'

 interface SettingsLayoutProps {
  title?: string
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'

-import ProductMenu from 'components/ui/ProductMenu'
+import { ProductMenu } from 'components/ui/ProductMenu'
 import { useSelectedProject, useStore, withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import { generateRealtimeMenu } from './RealtimeMenu.utils'

 export interface RealtimeLayoutProps {
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import ReportsMenu from './ReportsMenu'

 interface ReportsLayoutProps {
@@ -1,6 +1,6 @@
 import { withAuth } from 'hooks'
 import { ReactNode, useMemo } from 'react'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import SQLEditorMenu from './SQLEditorMenu'

 export interface SQLEditorLayoutProps {
@@ -5,7 +5,7 @@ import { AutoApiService, useProjectApiQuery } from 'data/config/project-api-quer
 import { useSelectedProject, useStore, withAuth } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import ProjectLayout from '../'
+import { ProjectLayout } from '../'
 import StorageMenu from './StorageMenu'

 export interface StorageLayoutProps {
@@ -4,7 +4,7 @@ import { PropsWithChildren, useMemo } from 'react'

 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
-import { ProjectLayoutWithAuth } from '../'
+import { ProjectLayoutWithAuth } from '../ProjectLayout/ProjectLayout'
 import TableEditorMenu from './TableEditorMenu'

 const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
@@ -6,7 +6,7 @@ import { IconChevronRight } from 'ui'
 import { withAuth } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
 import { Organization, Project } from 'types'
-import FeedbackDropdown from './ProjectLayout/LayoutHeader/FeedbackDropdown'
+import { FeedbackDropdown } from './ProjectLayout/LayoutHeader/FeedbackDropdown'
 import HelpPopover from './ProjectLayout/LayoutHeader/HelpPopover'

 interface WizardLayoutProps {
@@ -1,40 +1,17 @@
-import AccountLayout from './AccountLayout/AccountLayout'
-import AuthLayout from './AuthLayout/AuthLayout'
-import BillingLayout from './BillingLayout'
-import DatabaseLayout from './DatabaseLayout/DatabaseLayout'
-import DocsLayout from './DocsLayout/DocsLayout'
-import LogsLayout from './LogsLayout/LogsLayout'
-import OrganizationLayout from './OrganizationLayout'
-import ProjectLayout, { ProjectLayoutWithAuth } from './ProjectLayout/ProjectLayout'
-import SettingsLayout from './ProjectSettingsLayout/SettingsLayout'
-import ReportsLayout from './ReportsLayout/ReportsLayout'
-import SQLEditorLayout from './SQLEditorLayout/SQLEditorLayout'
-import ForgotPasswordLayout from './SignInLayout/ForgotPasswordLayout'
-import SignInLayout from './SignInLayout/SignInLayout'
-import StorageLayout from './StorageLayout/StorageLayout'
-import TableEditorLayout from './TableEditorLayout/TableEditorLayout'
-import VercelIntegrationLayout from './VercelIntegrationLayout'
-import WizardLayout, { WizardLayoutWithoutAuth } from './WizardLayout'
-
-export {
-  AccountLayout,
-  AuthLayout,
-  BillingLayout,
-  DatabaseLayout,
-  DocsLayout,
-  ForgotPasswordLayout,
-  LogsLayout,
-  OrganizationLayout,
-  ProjectLayoutWithAuth,
-  ReportsLayout,
-  SQLEditorLayout,
-  SettingsLayout,
-  SignInLayout,
-  StorageLayout,
-  TableEditorLayout,
-  VercelIntegrationLayout,
-  WizardLayout,
-  WizardLayoutWithoutAuth,
-}
-
-export default ProjectLayout
+export { default as AccountLayout } from './AccountLayout/AccountLayout'
+export { default as AuthLayout } from './AuthLayout/AuthLayout'
+export { default as BillingLayout } from './BillingLayout'
+export { default as DatabaseLayout } from './DatabaseLayout/DatabaseLayout'
+export { default as DocsLayout } from './DocsLayout/DocsLayout'
+export { default as LogsLayout } from './LogsLayout/LogsLayout'
+export { default as OrganizationLayout } from './OrganizationLayout'
+export { default as ProjectLayout } from './ProjectLayout/ProjectLayout'
+export { default as SettingsLayout } from './ProjectSettingsLayout/SettingsLayout'
+export { default as ReportsLayout } from './ReportsLayout/ReportsLayout'
+export { default as SQLEditorLayout } from './SQLEditorLayout/SQLEditorLayout'
+export { default as ForgotPasswordLayout } from './SignInLayout/ForgotPasswordLayout'
+export { default as SignInLayout } from './SignInLayout/SignInLayout'
+export { default as StorageLayout } from './StorageLayout/StorageLayout'
+export { default as TableEditorLayout } from './TableEditorLayout/TableEditorLayout'
+export { default as VercelIntegrationLayout } from './VercelIntegrationLayout'
+export { default as WizardLayout } from './WizardLayout'
@@ -1,7 +1,5 @@
-import StorageExplorer from './StorageExplorer/StorageExplorer'
-import StoragePolicies from './StoragePolicies/StoragePolicies'
-import StorageSettings from './StorageSettings/StorageSettings'
+export { default as StorageExplorer } from './StorageExplorer/StorageExplorer'
+export { default as StoragePolicies } from './StoragePolicies/StoragePolicies'
+export { default as StorageSettings } from './StorageSettings/StorageSettings'

-import DeleteBucketModal from './DeleteBucketModal'
-
-export { DeleteBucketModal, StorageExplorer, StoragePolicies, StorageSettings }
+export { default as DeleteBucketModal } from './DeleteBucketModal'
@@ -5,7 +5,7 @@ import { useRef } from 'react'
 import { cn } from 'ui'

 import { timeout } from 'lib/helpers'
-import Connecting from '../Loading'
+import { Loading } from '../Loading'
 import { alignEditor } from './CodeEditor.utils'

 interface CodeEditorProps {
@@ -88,7 +88,7 @@ const CodeEditor = ({
      value={value ?? undefined}
      language={language}
      defaultValue={defaultValue ?? undefined}
-      loading={loading || <Connecting />}
+      loading={loading || <Loading />}
      options={optionsMerged}
      onMount={onMount}
      onChange={onInputChange}
@@ -1,4 +1,3 @@
-import CodeEditor from './CodeEditor'
+export { default as CodeEditor } from './CodeEditor'

 export * from './CodeEditor.utils'
-export default CodeEditor
@@ -1,3 +0,0 @@
-import Loading from 'ui/src/components/LogoLoader'
-
-export default Loading
@@ -1,3 +1 @@
-import Loading from './Loading'
-
-export default Loading
+export { default as Loading } from 'ui/src/components/LogoLoader'
@@ -1,2 +1 @@
-import ProductMenu from './ProductMenu'
-export default ProductMenu
+export { default as ProductMenu } from './ProductMenu'
@@ -2,11 +2,11 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
 import { toast } from 'react-hot-toast'

 import { Query, SupaTable } from 'components/grid'
-import { executeSql } from 'data/sql/execute-sql-query'
 import { sqlKeys } from 'data/sql/keys'
 import { ImpersonationRole, wrapWithRoleImpersonation } from 'lib/role-impersonation'
 import { isRoleImpersonationEnabled } from 'state/role-impersonation-state'
 import { ResponseError } from 'types'
+import { executeSql } from 'data/sql/execute-sql-query'

 export type TableRowCreateVariables = {
  projectRef: string
@@ -43,10 +43,6 @@ import {
  RouteValidationWrapper,
 } from 'components/interfaces/App'
 import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
-import {
-  FeaturePreviewContextProvider,
-  FeaturePreviewModal,
-} from 'components/interfaces/App/FeaturePreview'
 import FlagProvider from 'components/ui/Flag/FlagProvider'
 import PageTelemetry from 'components/ui/PageTelemetry'
 import { useRootQueryClient } from 'data/query-client'
@@ -60,6 +56,8 @@ import { RootStore } from 'stores'
 import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import { AppPropsWithLayout } from 'types'
 import { Toaster } from 'ui'
+import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'

 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -5,7 +5,7 @@ import { createCliLoginSession } from 'data/cli/login'
 import { useIsLoggedIn, useParams } from 'common'
 import { useRouter } from 'next/router'
 import { withAuth } from 'hooks'
-import Connecting from 'components/ui/Loading/Loading'
+import { Loading } from 'components/ui/Loading'
 import { useEffect, useState } from 'react'
 import Link from 'next/link'

@@ -63,7 +63,7 @@ const CliLoginPage: NextPage = () => {
            </p>
          </>
        ) : (
-          <Connecting />
+          <Loading />
        )}
      </div>
    </APIAuthorizationLayout>
@@ -11,7 +11,6 @@ import {
  NotOrganizationOwnerWarning,
 } from 'components/interfaces/Organization/NewProject'
 import { RegionSelector } from 'components/interfaces/ProjectCreation/RegionSelector'
-import { WizardLayoutWithoutAuth } from 'components/layouts'
 import DisabledWarningDueToIncident from 'components/ui/DisabledWarningDueToIncident'
 import Panel from 'components/ui/Panel'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
@@ -37,6 +36,7 @@ import { passwordStrength, pluckObjectFields } from 'lib/helpers'
 import { NextPageWithLayout } from 'types'
 import { Badge, Button, IconExternalLink, IconUsers, Input, Listbox } from 'ui'
 import { components } from 'data/api'
+import { WizardLayoutWithoutAuth } from 'components/layouts/WizardLayout'

 type DesiredInstanceSize = components['schemas']['DesiredInstanceSize']

@@ -1,6 +1,6 @@
 import { OAuthApps } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
@@ -1,6 +1,6 @@
 import { AuditLogs } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { BillingSettings } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { useEffect } from 'react'
@@ -1,6 +1,6 @@
 import { GeneralSettings as GeneralSettingsLegacy } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
@@ -1,6 +1,6 @@
 import { InvoicesSettings } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
@@ -1,6 +1,6 @@
 import { TeamSettings } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
@@ -1,6 +1,6 @@
 import { Usage } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
-import Loading from 'components/ui/Loading'
+import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
@@ -10,7 +10,7 @@ import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCa
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
 import { DocsLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import Connecting from 'components/ui/Loading/Loading'
+import { Loading } from 'components/ui/Loading'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
 import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
@@ -86,7 +86,7 @@ const GraphiQLPage: NextPageWithLayout = () => {
  }, [projectRef, getImpersonatedRole, jwtSecret, accessToken, serviceRoleKey])

  if ((IS_PLATFORM && !accessToken) || !isFetched || (isExtensionsLoading && !pgGraphqlExtension)) {
-    return <Connecting />
+    return <Loading />
  }

  if (pgGraphqlExtension?.installed_version === null) {
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'

-import { AuthProvidersForm } from 'components/interfaces'
+import { AuthProvidersForm } from 'components/interfaces/Auth'
 import { AuthLayout } from 'components/layouts'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'

-import { EmailTemplates } from 'components/interfaces'
+import { EmailTemplates } from 'components/interfaces/Auth'
 import { AuthLayout } from 'components/layouts'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'