Chore/barrel files bye part 05 (#40016)

* Clean up barrel files part 4

* nit

* Part 5 of cleaning up barrel files

* Revert changes for types

* Nit

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx

@@ -1,9 +1,9 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import { noop } from 'lodash'
+import { HelpCircle } from 'lucide-react'
 import { useEffect } from 'react'
 
 import SqlEditor from 'components/ui/SqlEditor'
-import { usePrevious } from 'hooks/deprecated'
-import { HelpCircle } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 interface PolicyDefinitionProps {

apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx

@@ -7,12 +7,11 @@ import { useParams } from 'common'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { Loading } from 'components/ui/Loading'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { Card, LogoLoader, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { PublicationsTableItem } from './PublicationsTableItem'
@@ -87,7 +86,7 @@ export const PublicationsTables = () => {
 
       {(isLoading || isLoadingPermissions) && (
         <div className="mt-8">
-          <Loading />
+          <LogoLoader />
         </div>
       )}
 

apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx

@@ -9,8 +9,8 @@ import {
 import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from '@dnd-kit/sortable'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import dayjs from 'dayjs'
-import type { CSSProperties, DragEvent, ReactNode } from 'react'
 import { Plus, RefreshCw } from 'lucide-react'
+import type { CSSProperties, DragEvent, ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 

apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx

@@ -6,13 +6,13 @@ import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
-import { Loading } from 'components/ui/Loading'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { getRoleImpersonationJWT } from 'lib/role-impersonation'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
+import { LogoLoader } from 'ui'
 
 export const GraphiQLTab = () => {
   const { resolvedTheme } = useTheme()
@@ -73,7 +73,7 @@ export const GraphiQLTab = () => {
   }, [projectRef, getImpersonatedRoleState, jwtSecret, accessToken, serviceKey, secretKey?.api_key])
 
   if ((IS_PLATFORM && !accessToken) || !isFetched) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   return <GraphiQL fetcher={fetcher} theme={currentTheme} />

apps/studio/components/interfaces/Reports/GridResize.tsx

@@ -15,7 +15,7 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import { createSqlSnippetSkeletonV2 } from '../SQLEditor/SQLEditor.utils'
 import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
 import { ReportBlock } from './ReportBlock/ReportBlock'

apps/studio/components/interfaces/Reports/MetricOptions.tsx

@@ -8,7 +8,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { Metric, METRIC_CATEGORIES, METRICS } from 'lib/constants/metrics'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import {
   Command_Shadcn_,
   CommandEmpty_Shadcn_,

apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx

@@ -19,7 +19,7 @@ import { METRICS } from 'lib/constants/metrics'
 import { Activity, BarChartIcon, Loader2 } from 'lucide-react'
 import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import { WarningIcon } from 'ui'
 import { METRIC_THRESHOLDS } from './ReportBlock.constants'
 import { ReportBlockContainer } from './ReportBlockContainer'

apps/studio/components/interfaces/Reports/Reports.tsx

@@ -11,7 +11,6 @@ import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { DateRangePicker } from 'components/ui/DateRangePicker'
-import { Loading } from 'components/ui/Loading'
 import NoPermission from 'components/ui/NoPermission'
 import { DEFAULT_CHART_CONFIG } from 'components/ui/QueryBlock/QueryBlock'
 import { AnalyticsInterval } from 'data/analytics/constants'
@@ -29,8 +28,8 @@ import { Metric, TIME_PERIODS_REPORTS } from 'lib/constants/metrics'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Dashboards } from 'types'
-import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
+import type { Dashboards } from 'types'
+import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, LogoLoader } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { createSqlSnippetSkeletonV2 } from '../SQLEditor/SQLEditor.utils'
 import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
@@ -392,7 +391,7 @@ const Reports = () => {
   }, [hasEdits, confirmNavigate, router])
 
   if (isLoading || isLoadingPermissions) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   if (!canReadReport) {

apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx

@@ -1,7 +1,7 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import { AlertCircle, Check, Loader2, RefreshCcw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
-import { usePrevious } from 'hooks/deprecated'
 import { useProfile } from 'lib/profile'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'

apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx

@@ -1,9 +1,10 @@
-import Table from 'components/to-be-cleaned/Table'
+import { Play } from 'lucide-react'
 import { useRouter } from 'next/router'
+
+import Table from 'components/to-be-cleaned/Table'
 import type { LogSqlSnippets } from 'types'
 import { Button } from 'ui'
 import SqlSnippetCode from './Logs.SqlSnippetCode'
-import { Play } from 'lucide-react'
 
 interface Props {
   item: LogSqlSnippets.Content

apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx

@@ -2,7 +2,10 @@ import { useState } from 'react'
 
 import { useParams } from 'common'
 import { useDataTable } from 'components/ui/DataTable/providers/DataTableProvider'
-import { ServiceFlowType, useUnifiedLogInspectionQuery } from 'data/logs'
+import {
+  ServiceFlowType,
+  useUnifiedLogInspectionQuery,
+} from 'data/logs/unified-log-inspection-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import {
   CodeBlock,

apps/studio/components/layouts/ProjectLayout/index.tsx

@@ -5,7 +5,6 @@ import { forwardRef, Fragment, PropsWithChildren, ReactNode, useEffect, useState
 import { useFlag, useParams } from 'common'
 import { CreateBranchModal } from 'components/interfaces/BranchManagement/CreateBranchModal'
 import { ProjectAPIDocs } from 'components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
-import { Loading } from 'components/ui/Loading'
 import { ResourceExhaustionWarningBanner } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
@@ -15,7 +14,7 @@ import { withAuth } from 'hooks/misc/withAuth'
 import { PROJECT_STATUS } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { cn, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+import { cn, LogoLoader, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
 import { useEditorType } from '../editors/EditorsLayout.hooks'
 import BuildingState from './BuildingState'
@@ -334,7 +333,7 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
   }, [ref])
 
   if (isBlocking && (isLoading || (requiresProjectDetails && selectedProject === undefined))) {
-    return router.pathname.endsWith('[ref]') ? <LoadingState /> : <Loading />
+    return router.pathname.endsWith('[ref]') ? <LoadingState /> : <LogoLoader />
   }
 
   if (isRestarting && !isBackupsPage) {
@@ -370,7 +369,7 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
   }
 
   if (shouldRedirectToHomeForBuilding) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   if (shouldShowBuildingState) {

apps/studio/components/layouts/ReportsLayout/ReportMenuItem.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { ContentBase } from 'data/content/content-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useProfile } from 'lib/profile'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import {
   Button,
   cn,

apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx

@@ -6,7 +6,7 @@ import { getContentById } from 'data/content/content-id-query'
 import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
 import { Snippet } from 'data/content/sql-folders-query'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { SqlSnippets } from 'types'
+import type { SqlSnippets } from 'types'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 export const ShareSnippetModal = ({

apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx

@@ -1,11 +1,12 @@
+import { EyeOffIcon } from 'lucide-react'
+import { toast } from 'sonner'
+
 import { useParams } from 'common'
 import { getContentById } from 'data/content/content-id-query'
 import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
 import { Snippet } from 'data/content/sql-folders-query'
-import { EyeOffIcon } from 'lucide-react'
-import { toast } from 'sonner'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { SqlSnippets } from 'types'
+import type { SqlSnippets } from 'types'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 export const UnshareSnippetModal = ({

apps/studio/components/to-be-cleaned/TooltipListener.tsx

@@ -1,80 +0,0 @@
-import { useRef, useEffect } from 'react'
-import { renderToString } from 'react-dom/server'
-
-import { makeRandomString } from 'lib/helpers'
-import KeyMap from './KeyMap'
-
-/**
- * Hook for listening to hover action on the target element and show tooltip.
- * A tooltip contains a title and an optional keyMap shortcut.
- *
- * @param   {String}        title
- * @param   {String}        position          top/top-left/bottom/bottom-left/left/right. default value: bottom
- * @param   {String}        keyMap            element key shortcuts
- * @param   {String}        className         custom class name
- * @param   {Boolean}       nowrap            disable title wrap text
- *
- * @returns {Object}        Ref for the target element
- */
-
-export default function TooltipListener({
-  title = '',
-  position = 'bottom',
-  keyMap = null,
-  className = '',
-  nowrap = false,
-}) {
-  const ref = useRef<any>(null)
-  const tooltipId = `tooltip-${makeRandomString(5)}`
-  const tooltip = document.createElement('div')
-  tooltip.id = tooltipId
-  tooltip.className = `tooltips ${position} absolute p-2 m-1 bg-black border border-solid border-default rounded-lg rounded text-center ${className} z-50`
-  tooltip.innerHTML = `<span class="title ${
-    nowrap ? 'nowrap' : ''
-  }">${title}</span> ${renderToString(
-    <div className="dark">
-      {/* force dark mode on KeyMap */}
-      <KeyMap keyMap={keyMap} />
-    </div>
-  )}`
-
-  function handleMouseOver() {
-    const elem = document.getElementById(tooltipId)
-    if (!elem) {
-      ref.current.style.position = 'relative'
-      ref.current.appendChild(tooltip)
-    }
-  }
-
-  function handleMouseLeave() {
-    removeTooltip()
-  }
-
-  function handleMouseClick() {
-    removeTooltip()
-  }
-
-  function removeTooltip() {
-    const elem = document.getElementById(tooltipId)
-    if (elem) {
-      ref.current.style.position = 'static'
-      ref.current.removeChild(elem)
-    }
-  }
-
-  useEffect(() => {
-    if (!ref.current) return
-
-    ref.current.addEventListener('mouseover', handleMouseOver)
-    ref.current.addEventListener('mouseleave', handleMouseLeave)
-    ref.current.addEventListener('click', handleMouseClick)
-
-    return () => {
-      ref.current.removeEventListener('mouseover', handleMouseOver)
-      ref.current.removeEventListener('mouseleave', handleMouseLeave)
-      ref.current.removeEventListener('click', handleMouseClick)
-    }
-  }, [ref.current])
-
-  return ref
-}

apps/studio/components/ui/CodeEditor/CodeEditor.tsx

@@ -7,8 +7,7 @@ import { Markdown } from 'components/interfaces/Markdown'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { formatSql } from 'lib/formatSql'
 import { timeout } from 'lib/helpers'
-import { cn } from 'ui'
-import { Loading } from '../Loading'
+import { cn, LogoLoader } from 'ui'
 import { alignEditor } from './CodeEditor.utils'
 
 type CodeEditorActions = { enabled: boolean; callback: (value: any) => void }
@@ -238,7 +237,7 @@ const CodeEditor = ({
         value={value ?? undefined}
         language={language}
         defaultValue={defaultValue ?? undefined}
-        loading={loading || <Loading />}
+        loading={loading || <LogoLoader />}
         options={optionsMerged}
         onMount={onMount}
         onChange={onChangeContent}

apps/studio/components/ui/Loading/index.ts

@@ -1 +0,0 @@
-export { LogoLoader as Loading } from 'ui'

apps/studio/components/ui/SqlEditor.tsx

@@ -3,6 +3,7 @@ import { noop } from 'lodash'
 import { useEffect, useRef } from 'react'
 
 import { formatSql } from 'lib/formatSql'
+import { LogoLoader } from 'ui'
 
 // [Joshen] We should deprecate this and use CodeEditor instead
 
@@ -86,7 +87,7 @@ const SqlEditor = ({
       defaultLanguage={language}
       defaultValue={defaultValue}
       path={queryId}
-      loading={<Loading />}
+      loading={<LogoLoader />}
       options={{
         readOnly,
         tabSize: 2,

apps/studio/data/content-api/docs-error-codes-query.ts

@@ -1,6 +1,6 @@
 import { useQuery, type UseQueryOptions } from '@tanstack/react-query'
-import { graphql } from 'data/graphql'
 import { executeGraphQL } from 'data/graphql/execute'
+import { graphql } from 'data/graphql/gql'
 import { Service } from 'data/graphql/graphql'
 import { contentApiKeys } from './keys'
 

apps/studio/data/database/database-query-constants.ts

@@ -1,7 +1,4 @@
-export { CREATE_PG_GET_TABLEDEF_SQL } from './database-table-definition'
-
 // https://www.postgresql.org/docs/current/catalog-pg-constraint.html
-
 export enum FOREIGN_KEY_CASCADE_ACTION {
   NO_ACTION = 'a',
   RESTRICT = 'r',

apps/studio/data/database/entity-definitions-query.ts

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query'
-import { CREATE_PG_GET_TABLEDEF_SQL } from './database-query-constants'
+import { CREATE_PG_GET_TABLEDEF_SQL } from './database-table-definition'
 import { databaseKeys } from './keys'
 
 export const getEntityDefinitionsSql = ({

apps/studio/data/database/table-definition-query.ts

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query'
-import { CREATE_PG_GET_TABLEDEF_SQL } from './database-query-constants'
+import { CREATE_PG_GET_TABLEDEF_SQL } from './database-table-definition'
 import { databaseKeys } from './keys'
 
 type GetTableDefinitionArgs = {

apps/studio/data/graphql/index.ts

@@ -1,2 +0,0 @@
-export {} from './fragment-masking'
-export { graphql } from './gql'

apps/studio/data/logs/index.ts

@@ -1,12 +0,0 @@
-export { logsKeys } from './keys'
-export {
-  useUnifiedLogInspectionQuery,
-  getUnifiedLogInspection,
-  SERVICE_FLOW_TYPES,
-  type ServiceFlowType,
-  type UnifiedLogInspectionVariables,
-  type UnifiedLogInspectionResponse,
-  type UnifiedLogInspectionEntry,
-  type UnifiedLogInspectionData,
-  type UnifiedLogInspectionError,
-} from './unified-log-inspection-query'

apps/studio/hooks/deprecated.ts

@@ -1,12 +0,0 @@
-import TooltipListener from 'components/to-be-cleaned/TooltipListener'
-import { useEffect, useRef } from 'react'
-
-function usePrevious(value: any) {
-  const ref = useRef()
-  useEffect(() => {
-    ref.current = value
-  })
-  return ref.current
-}
-
-export { TooltipListener, usePrevious }

apps/studio/hooks/misc/useCheckPermissions.ts

@@ -1,12 +1,12 @@
-import { useIsLoggedIn, useParams } from 'common'
 import jsonLogic from 'json-logic-js'
+import { useMemo } from 'react'
 
+import { useIsLoggedIn, useParams } from 'common'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { IS_PLATFORM } from 'lib/constants'
 import type { Permission } from 'types'
 import { useSelectedOrganizationQuery } from './useSelectedOrganization'
 import { useSelectedProjectQuery } from './useSelectedProject'
-import { useMemo } from 'react'
 
 const toRegexpString = (actionOrResource: string) =>
   `^${actionOrResource.replace('.', '\\.').replace('%', '.*')}$`

apps/studio/hooks/misc/withAuth.tsx

@@ -2,12 +2,13 @@ import { useRouter } from 'next/router'
 import { ComponentType, useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
+import { useAuth } from 'common'
 import { SessionTimeoutModal } from 'components/interfaces/SignIn/SessionTimeoutModal'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useAuthenticatorAssuranceLevelQuery } from 'data/profile/mfa-authenticator-assurance-level-query'
-import { useAuth, useSignOut } from 'lib/auth'
+import { useSignOut } from 'lib/auth'
 import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
-import { NextPageWithLayout, isNextPageWithLayout } from 'types'
+import { type NextPageWithLayout, isNextPageWithLayout } from 'types'
 
 const MAX_TIMEOUT = 10000 // 10 seconds
 

apps/studio/lib/auth.tsx

@@ -1,13 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query'
+import { PropsWithChildren, useCallback, useEffect } from 'react'
+import { toast } from 'sonner'
+
 import {
   AuthProvider as AuthProviderInternal,
   clearLocalStorage,
   gotrueClient,
   useAuthError,
 } from 'common'
-import { PropsWithChildren, useCallback, useEffect } from 'react'
-import { toast } from 'sonner'
-
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { GOTRUE_ERRORS, IS_PLATFORM } from './constants'
 
@@ -39,8 +39,6 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
   )
 }
 
-export { useAuth, useIsLoggedIn, useSession, useUser } from 'common'
-
 export function useSignOut() {
   const queryClient = useQueryClient()
   const { clearStorage: clearAssistantStorage } = useAiAssistantStateSnapshot()

apps/studio/pages/_app.tsx

@@ -57,7 +57,7 @@ import { AuthProvider } from 'lib/auth'
 import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from 'lib/constants'
 import { ProfileProvider } from 'lib/profile'
 import { Telemetry } from 'lib/telemetry'
-import { AppPropsWithLayout } from 'types'
+import type { AppPropsWithLayout } from 'types'
 import { SonnerToaster, TooltipProvider } from 'ui'
 
 dayjs.extend(customParseFormat)

apps/studio/pages/aws-marketplace-onboarding.tsx

@@ -1,4 +1,6 @@
 import { useRouter } from 'next/router'
+
+import type { NextPageWithLayout } from 'types'
 import AwsMarketplaceCreateNewOrg from '../components/interfaces/Organization/CloudMarketplace/AwsMarketplaceCreateNewOrg'
 import { AwsMarketplaceLinkExistingOrg } from '../components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg'
 import AwsMarketplaceOnboardingPlaceholder from '../components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboardingPlaceholder'
@@ -11,7 +13,6 @@ import {
   ScaffoldTitle,
 } from '../components/layouts/Scaffold'
 import { useOrganizationsQuery } from '../data/organizations/organizations-query'
-import { NextPageWithLayout } from '../types'
 
 const AwsMarketplaceOnboarding: NextPageWithLayout = () => {
   const {

apps/studio/pages/cli/login.tsx

@@ -1,15 +1,15 @@
-import { useIsLoggedIn, useParams } from 'common'
-import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
-import CopyButton from 'components/ui/CopyButton'
-import { Loading } from 'components/ui/Loading'
-import { createCliLoginSession } from 'data/cli/login'
-import { withAuth } from 'hooks/misc/withAuth'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { toast } from 'sonner'
-import { NextPageWithLayout } from 'types'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+
+import { useIsLoggedIn, useParams } from 'common'
+import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
+import CopyButton from 'components/ui/CopyButton'
+import { createCliLoginSession } from 'data/cli/login'
+import { withAuth } from 'hooks/misc/withAuth'
+import type { NextPageWithLayout } from 'types'
+import { InputOTP, InputOTPGroup, InputOTPSlot, LogoLoader } from 'ui'
 import { Admonition } from 'ui-patterns'
 
 const CliLoginPage: NextPageWithLayout = () => {
@@ -77,7 +77,7 @@ const CliLoginPage: NextPageWithLayout = () => {
             />
           </>
         ) : (
-          <Loading />
+          <LogoLoader />
         )}
       </div>
     </APIAuthorizationLayout>

apps/studio/pages/forgot-password-mfa.tsx

@@ -7,9 +7,9 @@ import { toast } from 'sonner'
 import { getAccessToken } from 'common'
 import { SignInMfaForm } from 'components/interfaces/SignIn/SignInMfaForm'
 import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
-import { Loading } from 'components/ui/Loading'
 import { auth, buildPathWithParams, getReturnToPath } from 'lib/gotrue'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const ForgotPasswordMfa: NextPageWithLayout = () => {
   const router = useRouter()
@@ -69,7 +69,7 @@ const ForgotPasswordMfa: NextPageWithLayout = () => {
   if (loading) {
     return (
       <div className="flex flex-col flex-1 bg-alternative h-screen items-center justify-center">
-        <Loading />
+        <LogoLoader />
       </div>
     )
   }

apps/studio/pages/integrations/vercel/install.tsx

@@ -1,4 +1,5 @@
 import { useParams } from 'common'
+import { AlertTriangle, Info } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
@@ -13,7 +14,6 @@ import { ScaffoldColumn, ScaffoldContainer } from 'components/layouts/Scaffold'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { AlertTriangle, Info } from 'lucide-react'
 import { useIntegrationInstallationSnapshot } from 'state/integration-installation'
 import type { NextPageWithLayout, Organization } from 'types'
 

apps/studio/pages/join.tsx

@@ -4,7 +4,7 @@ import { OrganizationInvite } from 'components/interfaces/OrganizationInvite/Org
 import { BASE_PATH } from 'lib/constants'
 import { useTheme } from 'next-themes'
 import { useEffect, useMemo, useState } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import { cn } from 'ui'
 
 const JoinOrganizationPage: NextPageWithLayout = () => {

apps/studio/pages/logout.tsx

@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { toast } from 'sonner'
 
-import { Loading } from 'components/ui/Loading'
 import { useSignOut } from 'lib/auth'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const LogoutPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -21,7 +21,7 @@ const LogoutPage: NextPageWithLayout = () => {
 
   return (
     <div className="w-full h-screen flex items-center justify-center">
-      <Loading />
+      <LogoLoader />
     </div>
   )
 }

apps/studio/pages/org/[slug]/audit.tsx

@@ -2,17 +2,19 @@ import { AuditLogs } from 'components/interfaces/Organization/AuditLogs/AuditLog
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/OrganizationSettingsLayout'
-import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const OrgAuditLogs: NextPageWithLayout = () => {
   const { isLoading: isLoadingPermissions } = usePermissionsQuery()
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
 
   return (
-    <>{selectedOrganization === undefined && isLoadingPermissions ? <Loading /> : <AuditLogs />}</>
+    <>
+      {selectedOrganization === undefined && isLoadingPermissions ? <LogoLoader /> : <AuditLogs />}
+    </>
   )
 }
 

apps/studio/pages/org/[slug]/general.tsx

@@ -2,10 +2,10 @@ import { GeneralSettings } from 'components/interfaces/Organization/GeneralSetti
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/OrganizationSettingsLayout'
-import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const OrgGeneralSettings: NextPageWithLayout = () => {
   const { isLoading: isLoadingPermissions } = usePermissionsQuery()
@@ -14,7 +14,7 @@ const OrgGeneralSettings: NextPageWithLayout = () => {
   return (
     <>
       {selectedOrganization === undefined && isLoadingPermissions ? (
-        <Loading />
+        <LogoLoader />
       ) : (
         <GeneralSettings />
       )}

apps/studio/pages/org/[slug]/team.tsx

@@ -1,16 +1,20 @@
 import { TeamSettings } from 'components/interfaces/Organization/TeamSettings/TeamSettings'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
-import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const OrgTeamSettings: NextPageWithLayout = () => {
   const { isLoading: isLoadingPermissions } = usePermissionsQuery()
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
 
-  return selectedOrganization === undefined && isLoadingPermissions ? <Loading /> : <TeamSettings />
+  return selectedOrganization === undefined && isLoadingPermissions ? (
+    <LogoLoader />
+  ) : (
+    <TeamSettings />
+  )
 }
 
 OrgTeamSettings.getLayout = (page) => (

apps/studio/pages/organizations.tsx

@@ -14,7 +14,7 @@ import NoSearchResults from 'components/ui/NoSearchResults'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { withAuth } from 'hooks/misc/withAuth'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,

apps/studio/pages/project/[ref]/advisors/rules/performance.tsx

@@ -1,6 +1,6 @@
 import { AdvisorRules } from 'components/interfaces/Advisors/AdvisorRules'
 import { AdvisorRulesLayout } from 'components/layouts/AdvisorsLayout/AdvisorRulesLayout'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const AdvisorPerformanceRulesPage: NextPageWithLayout = () => {
   return <AdvisorRules category="performance" />

apps/studio/pages/project/[ref]/advisors/rules/security.tsx

@@ -1,6 +1,6 @@
 import { AdvisorRules } from 'components/interfaces/Advisors/AdvisorRules'
 import { AdvisorRulesLayout } from 'components/layouts/AdvisorsLayout/AdvisorRulesLayout'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const AdvisorSecurityRulesPage: NextPageWithLayout = () => {
   return <AdvisorRules category="security" />

apps/studio/pages/project/[ref]/auth/overview.tsx

@@ -1,16 +1,16 @@
-import { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
-import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
-import { ScaffoldContainer } from 'components/layouts/Scaffold'
-import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
-import { DocsButton } from 'components/ui/DocsButton'
-import { DOCS_URL } from 'lib/constants'
-import { OverviewUsage } from 'components/interfaces/Auth/Overview/OverviewUsage'
+import { FeatureFlagContext, useFlag, useParams } from 'common'
 import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewLearnMore'
 import { OverviewMonitoring } from 'components/interfaces/Auth/Overview/OverviewMonitoring'
+import { OverviewUsage } from 'components/interfaces/Auth/Overview/OverviewUsage'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer } from 'components/layouts/Scaffold'
+import { DocsButton } from 'components/ui/DocsButton'
+import { DOCS_URL } from 'lib/constants'
 import { useRouter } from 'next/router'
-import { FeatureFlagContext, useFlag, useParams } from 'common'
 import { useContext, useEffect } from 'react'
+import type { NextPageWithLayout } from 'types'
 
 const AuthOverview: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/auth/policies.tsx

@@ -12,23 +12,23 @@ import { generatePolicyUpdateSQL } from 'components/interfaces/Auth/Policies/Pol
 import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
 import { DocsButton } from 'components/ui/DocsButton'
 import NoPermission from 'components/ui/NoPermission'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useIsProtectedSchema } from 'hooks/useProtectedSchemas'
 import { DOCS_URL } from 'lib/constants'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { parseAsString, useQueryState } from 'nuqs'
 import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
-import { parseAsString, useQueryState } from 'nuqs'
 import type { NextPageWithLayout } from 'types'
 import { Input } from 'ui-patterns/DataInputs/Input'
 

apps/studio/pages/project/[ref]/database/functions.tsx

@@ -7,16 +7,16 @@ import { DeleteFunction } from 'components/interfaces/Database/Functions/DeleteF
 import FunctionsList from 'components/interfaces/Database/Functions/FunctionsList/FunctionsList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import NoPermission from 'components/ui/NoPermission'
 import { DatabaseFunction } from 'data/database-functions/database-functions-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { DOCS_URL } from 'lib/constants'
-import type { NextPageWithLayout } from 'types'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+import type { NextPageWithLayout } from 'types'
 
 const DatabaseFunctionsPage: NextPageWithLayout = () => {
   const [selectedFunction, setSelectedFunction] = useState<DatabaseFunction | undefined>()

apps/studio/pages/project/[ref]/database/schemas.tsx

@@ -2,8 +2,8 @@ import { ReactFlowProvider } from 'reactflow'
 
 import { SchemaGraph } from 'components/interfaces/Database/Schemas/SchemaGraph'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
-import type { NextPageWithLayout } from 'types'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import type { NextPageWithLayout } from 'types'
 
 const SchemasPage: NextPageWithLayout = () => {
   return (

apps/studio/pages/project/[ref]/database/triggers.tsx

@@ -9,15 +9,15 @@ import { generateTriggerCreateSQL } from 'components/interfaces/Database/Trigger
 import TriggersList from 'components/interfaces/Database/Triggers/TriggersList/TriggersList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import NoPermission from 'components/ui/NoPermission'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { DOCS_URL } from 'lib/constants'
-import type { NextPageWithLayout } from 'types'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+import type { NextPageWithLayout } from 'types'
 
 const TriggersPage: NextPageWithLayout = () => {
   const isInlineEditorEnabled = useIsInlineEditorEnabled()

apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx

@@ -8,7 +8,7 @@ import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useRouter } from 'next/compat/router'
 import { useEffect, useMemo } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import { Admonition } from 'ui-patterns'
 
 const IntegrationPage: NextPageWithLayout = () => {

apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx

@@ -10,7 +10,7 @@ import { UnknownInterface } from 'components/ui/UnknownInterface'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useRouter } from 'next/compat/router'
 import { useEffect, useMemo } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import { Admonition } from 'ui-patterns'
 
 const IntegrationPage: NextPageWithLayout = () => {

apps/studio/pages/project/[ref]/integrations/[id]/index.tsx

@@ -1,12 +1,11 @@
 import { useParams } from 'common'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import IntegrationsLayout from 'components/layouts/Integrations/layout'
-import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useRouter } from 'next/compat/router'
 import { useEffect } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const IntegrationPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/cron-logs.tsx

@@ -2,11 +2,11 @@
 
 import { useRouter } from 'next/router'
 
+import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx

@@ -3,11 +3,11 @@ import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constant
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-import { Loading } from 'components/ui/Loading'
 import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -24,7 +24,7 @@ export const LogPage: NextPageWithLayout = () => {
 
   // Prevent showing logs while checking plan or loading config
   if (isOrgPlanLoading || isFreePlan) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   return (

apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx

@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query

apps/studio/pages/project/[ref]/logs/edge-logs.tsx

@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx

@@ -1,9 +1,9 @@
+import { useParams } from 'common'
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import { useParams } from 'common'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref } = useParams()

apps/studio/pages/project/[ref]/logs/explorer/recent.tsx

@@ -1,15 +1,15 @@
+import { Clock } from 'lucide-react'
 import Link from 'next/link'
 
 import { useParams } from 'common'
 import RecentQueriesItem from 'components/interfaces/Settings/Logs/RecentQueriesItem'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import Table from 'components/to-be-cleaned/Table'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
 import { useLocalStorage } from 'hooks/misc/useLocalStorage'
 import type { LogSqlSnippets, NextPageWithLayout } from 'types'
 import { Button } from 'ui'
-import { Clock } from 'lucide-react'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogsSavedPage: NextPageWithLayout = () => {
   const { ref } = useParams()

apps/studio/pages/project/[ref]/logs/explorer/saved.tsx

@@ -3,13 +3,13 @@ import { Save } from 'lucide-react'
 import Link from 'next/link'
 
 import LogsSavedQueriesItem from 'components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import Table from 'components/to-be-cleaned/Table'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
 import { useContentQuery } from 'data/content/content-query'
 import type { NextPageWithLayout } from 'types'
 import { Loading } from 'ui'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 // [Joshen] This page looks like its not longer in use from a UI POV - double checking and deprecate + add redirects
 export const LogsSavedPage: NextPageWithLayout = () => {

apps/studio/pages/project/[ref]/logs/index.tsx

@@ -6,7 +6,7 @@ import { useUnifiedLogsPreview } from 'components/interfaces/App/FeaturePreview/
 import { UnifiedLogs } from 'components/interfaces/UnifiedLogs/UnifiedLogs'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { ProjectLayout } from 'components/layouts/ProjectLayout'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx

@@ -2,8 +2,8 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {

apps/studio/pages/project/[ref]/logs/pooler-logs.tsx

@@ -3,16 +3,16 @@ import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constant
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-import { Loading } from 'components/ui/Loading'
 import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref } = useParams()
   const { isLoading } = useSupavisorConfigurationQuery({ projectRef: ref ?? 'default' })
 
   // this prevents initial load of pooler logs before config has been retrieved
-  if (isLoading) return <Loading />
+  if (isLoading) return <LogoLoader />
 
   return (
     <LogsPreviewer

apps/studio/pages/project/[ref]/logs/postgres-logs.tsx

@@ -1,10 +1,10 @@
 import { useRouter } from 'next/router'
 
+import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx

@@ -2,10 +2,10 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-import type { NextPageWithLayout } from 'types'
 import { LogsTableEmptyState } from 'components/interfaces/Settings/Logs/LogsTableEmptyState'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/realtime-logs.tsx

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router'
 
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()

apps/studio/pages/project/[ref]/logs/storage-logs.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router'
 
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {

apps/studio/pages/project/[ref]/reports/api-overview.tsx

@@ -17,7 +17,7 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import { useApiReport } from 'data/reports/api-report-query'
 import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 export const ApiReport: NextPageWithLayout = () => {
   const report = useApiReport()

apps/studio/pages/project/[ref]/reports/auth.tsx

@@ -2,13 +2,13 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, LogsIcon, RefreshCw } from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 
-import { ReportChartV2 } from 'components/interfaces/Reports/v2/ReportChartV2'
-import { ReportSectionHeader } from 'components/interfaces/Reports/v2/ReportSectionHeader'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
 import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
+import { ReportChartV2 } from 'components/interfaces/Reports/v2/ReportChartV2'
+import { ReportSectionHeader } from 'components/interfaces/Reports/v2/ReportSectionHeader'
 import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
@@ -18,17 +18,6 @@ import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
 import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
-import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import type { NextPageWithLayout } from 'types'
-import {
-  createUsageReportConfig,
-  createErrorsReportConfig,
-  createLatencyReportConfig,
-} from 'data/reports/v2/auth.config'
-import { ReportSettings } from 'components/ui/Charts/ReportSettings'
-import type { ChartHighlightAction } from 'components/ui/Charts/ChartHighlightActions'
-import { useRouter } from 'next/router'
 import {
   ReportsNumericFilter,
   numericFilterSchema,
@@ -37,7 +26,18 @@ import {
   ReportsSelectFilter,
   selectFilterSchema,
 } from 'components/interfaces/Reports/v2/ReportsSelectFilter'
-import { useQueryState, parseAsJson } from 'nuqs'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import type { ChartHighlightAction } from 'components/ui/Charts/ChartHighlightActions'
+import { ReportSettings } from 'components/ui/Charts/ReportSettings'
+import {
+  createErrorsReportConfig,
+  createLatencyReportConfig,
+  createUsageReportConfig,
+} from 'data/reports/v2/auth.config'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useRouter } from 'next/router'
+import { parseAsJson, useQueryState } from 'nuqs'
+import type { NextPageWithLayout } from 'types'
 
 const AuthReport: NextPageWithLayout = () => {
   return (

apps/studio/pages/project/[ref]/reports/edge-functions.tsx

@@ -32,8 +32,8 @@ import { useReportDateRange } from 'hooks/misc/useReportDateRange'
 import { EDGE_FUNCTION_REGIONS } from 'components/interfaces/Reports/Reports.constants'
 import { ReportSettings } from 'components/ui/Charts/ReportSettings'
 import { BASE_PATH } from 'lib/constants'
+import { parseAsJson, useQueryState } from 'nuqs'
 import type { NextPageWithLayout } from 'types'
-import { useQueryState, parseAsJson } from 'nuqs'
 
 const EdgeFunctionsReportV2: NextPageWithLayout = () => {
   return (

apps/studio/pages/project/[ref]/reports/index.tsx

@@ -7,11 +7,11 @@ import { CreateReportModal } from 'components/interfaces/Reports/CreateReportMod
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
-import { Loading } from 'components/ui/Loading'
 import { useContentQuery } from 'data/content/content-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useProfile } from 'lib/profile'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 export const UserReportPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -48,7 +48,7 @@ export const UserReportPage: NextPageWithLayout = () => {
   return (
     <div className="h-full w-full">
       {isLoading ? (
-        <Loading />
+        <LogoLoader />
       ) : (
         <>
           <ProductEmptyState

apps/studio/pages/project/[ref]/reports/postgrest.tsx

@@ -1,27 +1,27 @@
-import { useEffect } from 'react'
+import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, RefreshCw } from 'lucide-react'
-import { useParams } from 'common'
+import { useEffect } from 'react'
 
-import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import {
-  LogsDatePicker,
-  DatePickerValue,
-} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
+import {
+  DatePickerValue,
+  LogsDatePicker,
+} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 
-import type { NextPageWithLayout } from 'types'
+import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
 import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
 import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
-import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
+import type { NextPageWithLayout } from 'types'
 
 const PostgRESTReport: NextPageWithLayout = () => {
   return (

apps/studio/pages/project/[ref]/reports/query-performance.tsx

@@ -1,25 +1,27 @@
 import { parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs'
 
 import { useParams } from 'common'
-import { EnableIndexAdvisorButton } from 'components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
 import { useIndexAdvisorStatus } from 'components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
 import { useQueryPerformanceSort } from 'components/interfaces/QueryPerformance/hooks/useQueryPerformanceSort'
+import { EnableIndexAdvisorButton } from 'components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
 import { QueryPerformance } from 'components/interfaces/QueryPerformance/QueryPerformance'
-import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
+import {
+  PRESET_CONFIG,
+  REPORT_DATERANGE_HELPER_LABELS,
+} from 'components/interfaces/Reports/Reports.constants'
 import { useQueryPerformanceQuery } from 'components/interfaces/Reports/Reports.queries'
 import { Presets } from 'components/interfaces/Reports/Reports.types'
 import { queriesFactory } from 'components/interfaces/Reports/Reports.utils'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { DocsButton } from 'components/ui/DocsButton'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
-import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 
 const QueryPerformanceReport: NextPageWithLayout = () => {
   const { ref } = useParams()

apps/studio/pages/project/[ref]/settings/general.tsx

@@ -1,3 +1,4 @@
+import { IS_PLATFORM } from 'common'
 import { subscriptionHasHipaaAddon } from 'components/interfaces/Billing/Subscription/Subscription.utils'
 import { ComplianceConfig } from 'components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode'
 import { CustomDomainConfig } from 'components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig'
@@ -11,10 +12,9 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import type { NextPageWithLayout } from 'types'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { IS_PLATFORM } from 'common'
+import type { NextPageWithLayout } from 'types'
 
 const ProjectSettings: NextPageWithLayout = () => {
   const { data: project } = useSelectedProjectQuery()

apps/studio/pages/project/[ref]/sql/[id].tsx

@@ -1,8 +1,8 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
-import { usePrevious } from '@uidotdev/usehooks'
 import { useParams } from 'common/hooks/useParams'
 import { SQLEditor } from 'components/interfaces/SQLEditor/SQLEditor'
 import DefaultLayout from 'components/layouts/DefaultLayout'

apps/studio/pages/sign-in-mfa.tsx

@@ -7,12 +7,12 @@ import { toast } from 'sonner'
 import { getAccessToken, useParams } from 'common'
 import { SignInMfaForm } from 'components/interfaces/SignIn/SignInMfaForm'
 import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
-import { Loading } from 'components/ui/Loading'
 import { useAddLoginEvent } from 'data/misc/audit-login-mutation'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import useLatest from 'hooks/misc/useLatest'
 import { auth, buildPathWithParams, getReturnToPath } from 'lib/gotrue'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const SignInMfaPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -90,7 +90,7 @@ const SignInMfaPage: NextPageWithLayout = () => {
   if (loading) {
     return (
       <div className="flex flex-col flex-1 bg-alternative h-screen items-center justify-center">
-        <Loading />
+        <LogoLoader />
       </div>
     )
   }

apps/studio/pages/support/new.tsx

@@ -2,7 +2,7 @@ import { SupportFormPage } from 'components/interfaces/Support/SupportFormPage'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { withAuth } from 'hooks/misc/withAuth'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const SupportPage: NextPageWithLayout = () => {
   return <SupportFormPage />

apps/studio/state/sql-editor-v2.ts

@@ -1,4 +1,5 @@
 import { debounce, memoize } from 'lodash'
+import { useMemo } from 'react'
 import { toast } from 'sonner'
 import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 import { devtools, proxyMap } from 'valtio/utils'
@@ -10,7 +11,6 @@ import { createSQLSnippetFolder } from 'data/content/sql-folder-create-mutation'
 import { updateSQLSnippetFolder } from 'data/content/sql-folder-update-mutation'
 import { Snippet, SnippetFolder } from 'data/content/sql-folders-query'
 import { getQueryClient } from 'data/query-client'
-import { useMemo } from 'react'
 import { SqlSnippets } from 'types'
 
 export type StateSnippetFolder = {