From cc47bcfa6d543eb15504098b00a3199c4d9e464e Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Wed, 17 Dec 2025 15:54:07 +0200 Subject: [PATCH] chore: Migrate `studio` to use `ui-patterns/shimmeringLoader` (#41405) * Add shimmering-loader CSS to ui-patterns. * Import the shimmering-loader classes from the ui-patterns component. * Remove ShimmeringLoader from studio. * Migrate studio to use ui-patterns/ShimmeringLoader. * Migrate away from using default import for ShimmeringLoader. * Fix the css imports in docs and studio. --- apps/docs/app/layout.tsx | 1 + apps/docs/styles/main.scss | 33 ------------- .../formatter/ForeignKeyFormatter.tsx | 2 +- .../formatter/ReferenceRecordPeek.tsx | 2 +- .../interfaces/Account/AuditLogs.tsx | 8 ++-- .../Preferences/AccountConnections.tsx | 2 +- .../Account/Preferences/AccountIdentities.tsx | 12 ++--- .../Account/TOTPFactors/AddNewFactorModal.tsx | 2 +- .../interfaces/Account/TOTPFactors/index.tsx | 2 +- .../interfaces/Auth/BasicAuthSettingsForm.tsx | 2 +- .../Auth/EmailTemplates/EmailTemplates.tsx | 2 +- .../Auth/OAuthApps/OAuthAppsList.tsx | 2 +- .../OAuthApps/OAuthServerSettingsForm.tsx | 2 +- .../Policies/PolicyEditor/PolicyRoles.tsx | 2 +- .../Auth/Policies/PolicyTableRow/index.tsx | 2 +- .../interfaces/Auth/RateLimits/RateLimits.tsx | 2 +- .../interfaces/Auth/Users/UserLogs.tsx | 2 +- .../Billing/Payment/AddPaymentMethodForm.tsx | 2 +- .../PaymentMethods/CurrentPaymentMethod.tsx | 2 +- .../Payment/PaymentMethods/PaymentMethods.tsx | 2 +- .../BranchManagement/BranchPanels.tsx | 2 +- .../BranchManagement/CreateBranchModal.tsx | 3 +- .../BranchManagement/EditBranchModal.tsx | 2 +- .../interfaces/Connect/ConnectTabContent.tsx | 2 +- .../Connect/DatabaseConnectionString.tsx | 2 +- .../interfaces/Connect/McpTabContent.tsx | 2 +- .../EnumeratedTypes/EnumeratedTypes.tsx | 2 +- .../Extensions/EnableExtensionModal.tsx | 2 +- .../Extensions/ExtensionCardSkeleton.tsx | 2 +- .../Database/Extensions/Extensions.tsx | 2 +- .../Functions/FunctionsList/FunctionsList.tsx | 2 +- .../Database/Hooks/HooksList/HooksList.tsx | 2 +- .../Database/Indexes/CreateIndexSidePanel.tsx | 2 +- .../interfaces/Database/Indexes/Indexes.tsx | 2 +- .../Database/Migrations/Migrations.tsx | 2 +- .../Publications/PublicationSkeleton.tsx | 2 +- .../Database/Replication/DestinationRow.tsx | 2 +- .../Database/Replication/PipelineStatus.tsx | 2 +- .../Database/Replication/RowMenu.tsx | 3 +- .../RestoreToNewProject.tsx | 2 +- .../Database/Roles/RoleRowSkeleton.tsx | 2 +- .../interfaces/Database/Tables/ColumnList.tsx | 2 +- .../interfaces/Database/Tables/TableList.tsx | 2 +- .../Triggers/TriggersList/TriggersList.tsx | 2 +- .../EdgeFunctionSecrets.tsx | 2 +- .../interfaces/Home/AdvisorWidget.tsx | 2 +- .../components/interfaces/Home/Home.tsx | 2 +- .../interfaces/HomeNew/AdvisorSection.tsx | 2 +- .../interfaces/HomeNew/SnippetDropdown.tsx | 2 +- .../Integrations/CronJobs/CronJobPage.tsx | 2 +- .../Integrations/CronJobs/CronJobsTab.tsx | 2 +- .../Integrations/Landing/IntegrationCard.tsx | 2 +- .../Landing/Integrations.constants.tsx | 2 +- .../Integrations/Queues/QueueTab.tsx | 2 +- .../Integrations/Queues/QueuesTab.tsx | 2 +- .../Queues/SingleQueue/QueueSettings.tsx | 2 +- .../Vault/Secrets/EditSecretModal.tsx | 2 +- .../Integrations/Webhooks/OverviewTab.tsx | 2 +- .../Wrappers/WrapperTableEditor.tsx | 2 +- .../jwt-secret-keys-table/index.tsx | 2 +- .../interfaces/Linter/LintPageTabs.tsx | 2 +- .../Organization/AuditLogs/AuditLogs.tsx | 2 +- .../BillingBreakdown/BillingBreakdown.tsx | 2 +- .../BillingBreakdown/UpcomingInvoice.tsx | 2 +- .../BillingCustomerData.tsx | 2 +- .../CostControl/CostControl.tsx | 2 +- .../Subscription/PaymentMethodSelection.tsx | 2 +- .../Subscription/PlanUpdateSidePanel.tsx | 2 +- .../Subscription/Subscription.tsx | 2 +- .../SubscriptionPlanUpdateDialog.tsx | 2 +- .../Organization/Documents/SOC2.tsx | 2 +- .../Documents/SecurityQuestionnaire.tsx | 2 +- .../InvoicesSettings/InvoicesSettings.tsx | 2 +- .../Organization/OAuthApps/OAuthApps.tsx | 2 +- .../interfaces/Organization/SSO/SSOConfig.tsx | 2 +- .../Organization/SecuritySettings.tsx | 2 +- .../Organization/TeamSettings/MemberRow.tsx | 2 +- .../Organization/TeamSettings/MembersView.tsx | 2 +- .../Organization/Usage/ActiveCompute.tsx | 4 +- .../interfaces/Organization/Usage/Compute.tsx | 4 +- .../Organization/Usage/TotalUsage.tsx | 2 +- .../interfaces/Organization/Usage/Usage.tsx | 6 +-- .../Usage/UsageSection/AttributeUsage.tsx | 2 +- .../Usage/UsageSection/DiskUsage.tsx | 2 +- .../interfaces/Realtime/Policies.tsx | 2 +- .../interfaces/Reports/MetricOptions.tsx | 2 +- .../interfaces/Settings/Addons/Addons.tsx | 2 +- .../ConnectionPooling/ConnectionPooling.tsx | 2 +- .../Database/DiskSizeConfigurationModal.tsx | 2 +- .../NetworkRestrictions.tsx | 10 ++-- .../interfaces/Settings/General/General.tsx | 2 +- .../Infrastructure/InfrastructureActivity.tsx | 2 +- .../Infrastructure/InfrastructureInfo.tsx | 2 +- .../VercelIntegration/VercelSection.tsx | 2 +- .../Settings/Logs/ErrorCodeDialog.tsx | 2 +- .../interfaces/SignIn/SignInMfaForm.tsx | 2 +- .../Storage/AnalyticsBuckets/index.tsx | 2 +- .../interfaces/Storage/FilesBuckets/index.tsx | 2 +- .../StorageExplorer/FileExplorerColumn.tsx | 2 +- .../StorageSettings/StorageSettings.tsx | 2 +- .../Storage/VectorBuckets/index.tsx | 2 +- .../interfaces/Support/ProjectAndPlanInfo.tsx | 2 +- .../ForeignKeysManagement.tsx | 2 +- .../TableGridEditor/TableDefinition.tsx | 2 +- .../layouts/AppLayout/BranchDropdown.tsx | 2 +- .../AppLayout/OrganizationDropdown.tsx | 2 +- .../layouts/AppLayout/ProjectDropdown.tsx | 2 +- .../ObservabilityLayout/ObservabilityMenu.tsx | 2 +- .../layouts/ProjectLayout/LoadingState.tsx | 2 +- .../layouts/ReportsLayout/ReportsMenu.tsx | 2 +- .../SQLEditorNavV2/SearchList.tsx | 2 +- .../components/ui/ComputeBadgeWrapper.tsx | 2 +- apps/studio/components/ui/FilterPopover.tsx | 3 +- .../ui/OrganizationProjectSelector.tsx | 2 +- .../components/ui/QueryBlock/QueryBlock.tsx | 2 +- .../studio/components/ui/ShimmeringLoader.tsx | 38 --------------- apps/studio/components/ui/org-selector.tsx | 2 +- .../hooks/misc/useSynchronizedAnimation.ts | 45 ------------------ apps/studio/pages/_app.tsx | 1 + apps/studio/pages/account/me.tsx | 2 +- apps/studio/pages/authorize.tsx | 2 +- apps/studio/pages/claim-project.tsx | 2 +- .../pages/project/[ref]/auth/audit-logs.tsx | 2 +- apps/studio/pages/project/[ref]/auth/mfa.tsx | 2 +- .../pages/project/[ref]/auth/performance.tsx | 2 +- .../pages/project/[ref]/auth/policies.tsx | 2 +- .../pages/project/[ref]/auth/protection.tsx | 2 +- .../pages/project/[ref]/auth/rate-limits.tsx | 2 +- .../pages/project/[ref]/auth/sessions.tsx | 2 +- .../project/[ref]/auth/url-configuration.tsx | 2 +- .../project/[ref]/database/backups/pitr.tsx | 2 +- .../[ref]/database/backups/scheduled.tsx | 2 +- .../[ref]/database/column-privileges.tsx | 2 +- .../project/[ref]/database/tables/[id].tsx | 2 +- .../pages/project/[ref]/functions/index.tsx | 2 +- .../[id]/[pageId]/[childId]/index.tsx | 2 +- .../integrations/[id]/[pageId]/index.tsx | 2 +- .../project/[ref]/integrations/[id]/index.tsx | 2 +- .../project/[ref]/settings/jwt/index.tsx | 2 +- apps/studio/styles/storage.scss | 31 ------------- packages/ui-patterns/index.tsx | 10 ++-- packages/ui-patterns/package.json | 46 +++++++++++++++---- .../ui-patterns/scripts/update-exports.ts | 2 +- .../ui-patterns/src/InnerSideMenu/index.tsx | 2 +- .../src/ShimmeringLoader/index.css | 31 +++++++++++++ 145 files changed, 229 insertions(+), 314 deletions(-) delete mode 100644 apps/studio/components/ui/ShimmeringLoader.tsx delete mode 100644 apps/studio/hooks/misc/useSynchronizedAnimation.ts create mode 100644 packages/ui-patterns/src/ShimmeringLoader/index.css diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index cd7cfa7e8f..3d23504a92 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -1,5 +1,6 @@ import '@code-hike/mdx/styles' import 'config/code-hike.scss' +import 'ui-patterns/ShimmeringLoader/index.css' import '../styles/main.scss' import '../styles/new-docs.scss' import '../styles/prism-okaidia.scss' diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss index c82c2eb688..a581a22e6c 100644 --- a/apps/docs/styles/main.scss +++ b/apps/docs/styles/main.scss @@ -310,39 +310,6 @@ th code { image-rendering: high-quality; } -/* Loaders */ - -.shimmering-loader { - animation: shimmer 2s infinite linear; - background: linear-gradient( - to right, - hsl(var(--border-default)) 4%, - hsl(var(--background-surface-200)) 25%, - hsl(var(--border-default)) 36% - ); - background-size: 1000px 100%; -} - -.dark .shimmering-loader { - animation: shimmer 2s infinite linear; - background: linear-gradient( - to right, - hsl(var(--border-default)) 4%, - hsl(var(--border-control)) 25%, - hsl(var(--border-default)) 36% - ); - background-size: 1000px 100%; -} - -@keyframes shimmer { - 0% { - background-position: -1000px 0; - } - 100% { - background-position: 1000px 0; - } -} - .skip-link { @apply sr-only; } diff --git a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx index 0de4644531..44c420479f 100644 --- a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx +++ b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx @@ -5,12 +5,12 @@ import type { RenderCellProps } from 'react-data-grid' import { convertByteaToHex } from 'components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useTableEditorQuery } from 'data/table-editor/table-editor-query' import { isTableLike } from 'data/table-editor/table-editor-types' import { useTableQuery } from 'data/tables/table-retrieve-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import type { SupaRow } from '../../types' import { NullValue } from '../common/NullValue' import { ReferenceRecordPeek } from './ReferenceRecordPeek' diff --git a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx index 26eb6ac3f0..0ac4073ff3 100644 --- a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx +++ b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx @@ -10,11 +10,11 @@ import { getColumnDefaultWidth, } from 'components/grid/utils/gridColumns' import { convertByteaToHex } from 'components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { EditorTablePageLink } from 'data/prefetchers/project.$ref.editor.$id' import { useTableRowsQuery } from 'data/table-rows/table-rows-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface ReferenceRecordPeekProps { table: PostgresTable diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx index e5ff6d9fbe..7dee611eaf 100644 --- a/apps/studio/components/interfaces/Account/AuditLogs.tsx +++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx @@ -1,21 +1,21 @@ +import { keepPreviousData } from '@tanstack/react-query' +import { useDebounce } from '@uidotdev/usehooks' import dayjs from 'dayjs' import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react' import { useEffect, useMemo, useState } from 'react' -import { keepPreviousData } from '@tanstack/react-query' -import { useDebounce } from '@uidotdev/usehooks' import { LogDetailsPanel } from 'components/interfaces/AuditLogs/LogDetailsPanel' import Table from 'components/to-be-cleaned/Table' import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { FilterPopover } from 'components/ui/FilterPopover' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import type { AuditLog } from 'data/organizations/organization-audit-logs-query' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useProfileAuditLogsQuery } from 'data/profile/profile-audit-logs-query' import { useProjectsInfiniteQuery } from 'data/projects/projects-infinite-query' import { Button } from 'ui' -import { TimestampInfo } from 'ui-patterns' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' +import { TimestampInfo } from 'ui-patterns/TimestampInfo' import { LogsDatePicker } from '../Settings/Logs/Logs.DatePickers' export const AuditLogs = () => { diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx index 339521850b..e941faeb1e 100644 --- a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx @@ -28,7 +28,7 @@ import { PageSectionSummary, PageSectionTitle, } from 'ui-patterns/PageSection' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const AccountConnections = () => { const { diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx index 08ebeb932b..edd200577c 100644 --- a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx @@ -25,12 +25,6 @@ import { TooltipTrigger, } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' -import { - ChangeEmailAddressForm, - GitHubChangeEmailAddress, - SSOChangeEmailAddress, -} from './ChangeEmailAddress' import { PageSection, PageSectionContent, @@ -39,6 +33,12 @@ import { PageSectionSummary, PageSectionTitle, } from 'ui-patterns/PageSection' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' +import { + ChangeEmailAddressForm, + GitHubChangeEmailAddress, + SSOChangeEmailAddress, +} from './ChangeEmailAddress' const getProviderName = (provider: string) => provider === 'github' diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx index 28956b5180..d72c035224 100644 --- a/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx +++ b/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx @@ -4,7 +4,6 @@ import { toast } from 'sonner' import { LOCAL_STORAGE_KEYS } from 'common' import InformationBox from 'components/ui/InformationBox' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { organizationKeys } from 'data/organizations/keys' import { useMfaChallengeAndVerifyMutation } from 'data/profile/mfa-challenge-and-verify-mutation' import { useMfaEnrollMutation } from 'data/profile/mfa-enroll-mutation' @@ -12,6 +11,7 @@ import { useMfaUnenrollMutation } from 'data/profile/mfa-unenroll-mutation' import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage' import { Input } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' interface AddNewFactorModalProps { visible: boolean diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx index a8fecf483f..45e7839730 100644 --- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx +++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx @@ -3,10 +3,10 @@ import { AlertCircle } from 'lucide-react' import { useState } from 'react' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query' import { DATETIME_FORMAT } from 'lib/constants' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { AddNewFactorModal } from './AddNewFactorModal' import DeleteFactorModal from './DeleteFactorModal' diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx index 0ca0e48449..68d7992f03 100644 --- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx @@ -38,7 +38,7 @@ import { PageSectionSummary, PageSectionTitle, } from 'ui-patterns/PageSection' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { NO_REQUIRED_CHARACTERS } from './Auth.constants' const schema = object({ diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx index 9c77cd7c66..0f8a3952ba 100644 --- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx +++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx @@ -10,7 +10,6 @@ import { z } from 'zod' import { LOCAL_STORAGE_KEYS, useParams } from 'common' import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAuthConfigQuery } from 'data/auth/auth-config-query' import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -38,6 +37,7 @@ import { PageSectionSummary, PageSectionTitle, } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { TEMPLATES_SCHEMAS } from '../AuthTemplatesValidation' import { slugifyTitle } from './EmailTemplates.utils' diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx index 0fce4f17a4..7a0fc73afa 100644 --- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx +++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx @@ -9,7 +9,6 @@ import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { FilterPopover } from 'components/ui/FilterPopover' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAuthConfigQuery } from 'data/auth/auth-config-query' import { useProjectEndpointQuery } from 'data/config/project-endpoint-query' import { useOAuthServerAppDeleteMutation } from 'data/oauth-server-apps/oauth-server-app-delete-mutation' @@ -35,6 +34,7 @@ import { } from 'ui' import { Admonition } from 'ui-patterns/admonition' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { TimestampInfo } from 'ui-patterns/TimestampInfo' import { CreateOrUpdateOAuthAppSheet } from './CreateOrUpdateOAuthAppSheet' import { DeleteOAuthAppModal } from './DeleteOAuthAppModal' diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx index bdbf02ccfa..6a46e09025 100644 --- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx @@ -9,7 +9,6 @@ import * as z from 'zod' import { useParams } from 'common' import { InlineLink } from 'components/ui/InlineLink' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAuthConfigQuery } from 'data/auth/auth-config-query' import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation' import { useOAuthServerAppsQuery } from 'data/oauth-server-apps/oauth-server-apps-query' @@ -29,6 +28,7 @@ import { import { Admonition } from 'ui-patterns/admonition' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const configUrlSchema = z.object({ id: z.string(), diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx index f28b869426..0eaaa9ede6 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx @@ -1,11 +1,11 @@ import { SYSTEM_ROLES } from 'components/interfaces/Database/Roles/Roles.constants' import AlertError from 'components/ui/AlertError' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { sortBy } from 'lodash' import MultiSelect from 'ui-patterns/MultiSelectDeprecated' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface PolicyRolesProps { selectedRoles: string[] diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx index 585dbb3cf9..02c34be3d6 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx @@ -19,7 +19,7 @@ import { TableRow, } from 'ui' import { Admonition } from 'ui-patterns' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { usePoliciesData } from '../PoliciesDataContext' import { PolicyRow } from './PolicyRow' import type { PolicyTable } from './PolicyTableRow.types' diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx index 2f7497d8b7..0e5899e722 100644 --- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx +++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx @@ -9,7 +9,6 @@ import * as z from 'zod' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAuthConfigQuery } from 'data/auth/auth-config-query' import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -29,6 +28,7 @@ import { } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { isSmtpEnabled } from '../SmtpForm/SmtpForm.utils' export const RateLimits = () => { diff --git a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx index 5dc5396ae0..c204d91b81 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx @@ -6,12 +6,12 @@ import { useEffect } from 'react' import { useParams } from 'common' import { LOGS_TABLES } from 'components/interfaces/Settings/Logs/Logs.constants' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { User } from 'data/auth/users-infinite-query' import useLogsPreview from 'hooks/analytics/useLogsPreview' import { useLogsUrlState } from 'hooks/analytics/useLogsUrlState' import { Button, cn, CriticalIcon, Separator } from 'ui' import { Admonition, TimestampInfo } from 'ui-patterns' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { UserHeader } from './UserHeader' import { PANEL_PADDING } from './Users.constants' diff --git a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx index 91a86aa1c2..ae56cca687 100644 --- a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx @@ -14,7 +14,7 @@ import { isEqual } from 'lodash' import { useRef, useState } from 'react' import { toast } from 'sonner' import { Button, Checkbox_Shadcn_, Label_Shadcn_, Modal } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface AddPaymentMethodFormProps { returnUrl: string diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx index f7044cc6f8..99eda56f6a 100644 --- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx @@ -4,11 +4,11 @@ import Link from 'next/link' import { useParams } from 'common' import { SupportLink } from 'components/interfaces/Support/SupportLink' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrganizationPaymentMethodsQuery } from 'data/organizations/organization-payment-methods-query' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { Button } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import CreditCard from './CreditCard' const CurrentPaymentMethod = () => { diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx index 10efc0bc37..5b1f019410 100644 --- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx @@ -16,7 +16,6 @@ import { FormPanel } from 'components/ui/Forms/FormPanel' import { FormSection, FormSectionContent } from 'components/ui/Forms/FormSection' import NoPermission from 'components/ui/NoPermission' import PartnerManagedResource from 'components/ui/PartnerManagedResource' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrganizationPaymentMethodsQuery } from 'data/organizations/organization-payment-methods-query' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -25,6 +24,7 @@ import { MANAGED_BY } from 'lib/constants/infrastructure' import { getURL } from 'lib/helpers' import { Button } from 'ui' import { Admonition } from 'ui-patterns/admonition' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import ChangePaymentMethodModal from './ChangePaymentMethodModal' import CreditCard from './CreditCard' import DeletePaymentMethodModal from './DeletePaymentMethodModal' diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx index 629739d8ef..f1a67a2499 100644 --- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx +++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx @@ -4,10 +4,10 @@ import { useRouter } from 'next/router' import { PropsWithChildren, ReactNode } from 'react' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import type { Branch } from 'data/branches/branches-query' import Link from 'next/link' import { Tooltip, TooltipContent, TooltipTrigger } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { WorkflowLogs } from './WorkflowLogs' interface BranchManagementSectionProps { diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx index 92ba49c397..749a3826ee 100644 --- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx @@ -16,7 +16,6 @@ import { BranchingPITRNotice } from 'components/layouts/AppLayout/EnableBranchin import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { InlineLink, InlineLinkClassName } from 'components/ui/InlineLink' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useBranchCreateMutation } from 'data/branches/branch-create-mutation' import { useBranchesQuery } from 'data/branches/branches-query' @@ -55,7 +54,7 @@ import { cn, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { estimateComputeSize, estimateDiskCost, diff --git a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx index 91a6c2b6d0..b71554c2a4 100644 --- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx @@ -10,7 +10,6 @@ import * as z from 'zod' import { useParams } from 'common' import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation' import { Branch, useBranchesQuery } from 'data/branches/branches-query' import { useCheckGithubBranchValidity } from 'data/integrations/github-branch-check-query' @@ -38,6 +37,7 @@ import { cn, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' interface EditBranchModalProps { branch?: Branch diff --git a/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx b/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx index 59dce1062d..954ad513a7 100644 --- a/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx +++ b/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx @@ -2,7 +2,6 @@ import dynamic from 'next/dynamic' import { forwardRef, HTMLAttributes, useMemo } from 'react' import { useParams } from 'common' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query' import { usePgbouncerConfigQuery } from 'data/database/pgbouncer-config-query' import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query' @@ -11,6 +10,7 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization import { pluckObjectFields } from 'lib/helpers' import { useTrack } from 'lib/telemetry/track' import { cn, CopyCallbackContext } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { getAddons } from '../Billing/Subscription/Subscription.utils' import type { projectKeys } from './Connect.types' import { getConnectionStrings } from './DatabaseSettings.utils' diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx index 608de62205..130a129a3d 100644 --- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx +++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx @@ -7,7 +7,6 @@ import { getAddons } from 'components/interfaces/Billing/Subscription/Subscripti import AlertError from 'components/ui/AlertError' import { DatabaseSelector } from 'components/ui/DatabaseSelector' import { InlineLink } from 'components/ui/InlineLink' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { usePgbouncerConfigQuery } from 'data/database/pgbouncer-config-query' import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query' import { useReadReplicasQuery } from 'data/read-replicas/replicas-query' @@ -33,6 +32,7 @@ import { Separator, cn, } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { CONNECTION_PARAMETERS, type ConnectionStringMethod, diff --git a/apps/studio/components/interfaces/Connect/McpTabContent.tsx b/apps/studio/components/interfaces/Connect/McpTabContent.tsx index ea33579fbb..b41b54e03c 100644 --- a/apps/studio/components/interfaces/Connect/McpTabContent.tsx +++ b/apps/studio/components/interfaces/Connect/McpTabContent.tsx @@ -1,11 +1,11 @@ import { IS_PLATFORM, useParams } from 'common' import Panel from 'components/ui/Panel' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { BASE_PATH } from 'lib/constants' import { useTrack } from 'lib/telemetry/track' import { useTheme } from 'next-themes' import { useMemo, useState } from 'react' import { createMcpCopyHandler, McpConfigPanel, type McpClient } from 'ui-patterns/McpUrlBuilder' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import type { projectKeys } from './Connect.types' export const McpTabContent = ({ projectKeys }: { projectKeys: projectKeys }) => { diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx index 48fb9810bb..6c4243e6e7 100644 --- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx +++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx @@ -6,7 +6,6 @@ import { toast } from 'sonner' import AlertError from 'components/ui/AlertError' import { DocsButton } from 'components/ui/DocsButton' import SchemaSelector from 'components/ui/SchemaSelector' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useEnumeratedTypesQuery } from 'data/enumerated-types/enumerated-types-query' import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect' import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState' @@ -27,6 +26,7 @@ import { TableHeader, TableRow, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning' import CreateEnumeratedTypeSidePanel from './CreateEnumeratedTypeSidePanel' import DeleteEnumeratedTypeModal from './DeleteEnumeratedTypeModal' diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx index d0566a457e..5aafee8260 100644 --- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx @@ -4,7 +4,6 @@ import { useEffect, useState } from 'react' import { toast } from 'sonner' import { DocsButton } from 'components/ui/DocsButton' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useDatabaseExtensionEnableMutation } from 'data/database-extensions/database-extension-enable-mutation' import { useSchemasQuery } from 'data/database/schemas-query' import { executeSql } from 'data/sql/execute-sql-query' @@ -23,6 +22,7 @@ import { WarningIcon, } from 'ui' import { Admonition } from 'ui-patterns' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' const orioleExtCallOuts = ['vector', 'postgis'] diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionCardSkeleton.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionCardSkeleton.tsx index dff90b7e65..85c57d7d6f 100644 --- a/apps/studio/components/interfaces/Database/Extensions/ExtensionCardSkeleton.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionCardSkeleton.tsx @@ -1,5 +1,5 @@ -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { Toggle } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export interface ExtensionCardSkeletonProps { index?: number diff --git a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx index 06bedcf8e5..f4dfd26a69 100644 --- a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx @@ -6,7 +6,6 @@ import { useEffect, useState } from 'react' import { useParams } from 'common' import InformationBox from 'components/ui/InformationBox' import { NoSearchResults } from 'components/ui/NoSearchResults' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' @@ -21,6 +20,7 @@ import { TableHeader, TableRow, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ExtensionRow } from './ExtensionRow' import { HIDDEN_EXTENSIONS, SEARCH_TERMS } from './Extensions.constants' diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx index 067be68ca6..57c7a40814 100644 --- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx +++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx @@ -15,7 +15,6 @@ import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import SchemaSelector from 'components/ui/SchemaSelector' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseFunctionDeleteMutation } from 'data/database-functions/database-functions-delete-mutation' import type { DatabaseFunction } from 'data/database-functions/database-functions-query' import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query' @@ -37,6 +36,7 @@ import { TableHeader, TableRow, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ProtectedSchemaWarning } from '../../ProtectedSchemaWarning' import FunctionList from './FunctionList' diff --git a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx index 64e0d1b47b..e87905d435 100644 --- a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx +++ b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx @@ -8,13 +8,13 @@ import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { DocsButton } from 'components/ui/DocsButton' import { NoSearchResults } from 'components/ui/NoSearchResults' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseHooksQuery } from 'data/database-triggers/database-triggers-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { DOCS_URL } from 'lib/constants' import { noop } from 'lib/void' import { Input } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { HooksListEmpty } from './HooksListEmpty' import { SchemaTable } from './SchemaTable' diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx index 224c87618d..6db649328c 100644 --- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx +++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx @@ -5,7 +5,6 @@ import { toast } from 'sonner' import CodeEditor from 'components/ui/CodeEditor/CodeEditor' import { DocsButton } from 'components/ui/DocsButton' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useDatabaseIndexCreateMutation } from 'data/database-indexes/index-create-mutation' import { useSchemasQuery } from 'data/database/schemas-query' import { useTableColumnsQuery } from 'data/database/table-columns-query' @@ -36,6 +35,7 @@ import { import { Admonition } from 'ui-patterns' import { MultiSelectOption } from 'ui-patterns/MultiSelectDeprecated' import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { INDEX_TYPES } from './Indexes.constants' diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx index a37cc3c922..e463dcb481 100644 --- a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx +++ b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx @@ -8,7 +8,6 @@ import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import CodeEditor from 'components/ui/CodeEditor/CodeEditor' import SchemaSelector from 'components/ui/SchemaSelector' -import ShimmeringLoader, { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseIndexDeleteMutation } from 'data/database-indexes/index-delete-mutation' import { useIndexesQuery, type DatabaseIndex } from 'data/database-indexes/indexes-query' import { useSchemasQuery } from 'data/database/schemas-query' @@ -29,6 +28,7 @@ import { } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal' +import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning' import CreateIndexSidePanel from './CreateIndexSidePanel' diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx index 14b7e6062d..d8b1bd5a7a 100644 --- a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx +++ b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx @@ -5,7 +5,6 @@ import { SupportCategories } from '@supabase/shared-types/out/constants' import { SupportLink } from 'components/interfaces/Support/SupportLink' import CodeEditor from 'components/ui/CodeEditor/CodeEditor' import { InlineLink } from 'components/ui/InlineLink' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { DatabaseMigration, useMigrationsQuery } from 'data/database/migrations-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { DOCS_URL } from 'lib/constants' @@ -27,6 +26,7 @@ import { } from 'ui' import { Admonition } from 'ui-patterns' import { Input } from 'ui-patterns/DataInputs/Input' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { MigrationsEmptyState } from './MigrationsEmptyState' const Migrations = () => { diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationSkeleton.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationSkeleton.tsx index 70def772d8..853e575b6a 100644 --- a/apps/studio/components/interfaces/Database/Publications/PublicationSkeleton.tsx +++ b/apps/studio/components/interfaces/Database/Publications/PublicationSkeleton.tsx @@ -1,5 +1,5 @@ -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { Switch, TableCell, TableRow } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export interface PublicationSkeletonProps { index?: number diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx index a42291ccd9..5e81863095 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx @@ -18,7 +18,7 @@ import { } from 'state/replication-pipeline-request-status' import type { ResponseError } from 'types' import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { DeleteDestination } from './DeleteDestination' import { DestinationPanel } from './DestinationPanel/DestinationPanel' import { DestinationPanelSchemaType } from './DestinationPanel/DestinationPanel.schema' diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx index 6d456e5a3b..27dc8ba81e 100644 --- a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx +++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx @@ -7,7 +7,7 @@ import { ReplicationPipelineStatusData } from 'data/replication/pipeline-status- import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status' import type { ResponseError } from 'types' import { cn, Tooltip, TooltipContent, TooltipTrigger, WarningIcon } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { getPipelineStateMessages } from './Pipeline.utils' import { PipelineStatusName } from './Replication.constants' diff --git a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx index 6848029b95..d92777ca3e 100644 --- a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx +++ b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx @@ -21,9 +21,8 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { - PIPELINE_ACTIONABLE_STATES, PIPELINE_DISABLE_ALLOWED_FROM, PIPELINE_ENABLE_ALLOWED_FROM, PIPELINE_ERROR_MESSAGES, diff --git a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx index 48b5e1fe0e..2ad449b315 100644 --- a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx +++ b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx @@ -14,7 +14,6 @@ import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' import NoPermission from 'components/ui/NoPermission' import Panel from 'components/ui/Panel' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useDiskAttributesQuery } from 'data/config/disk-attributes-query' import { useCloneBackupsQuery } from 'data/projects/clone-query' @@ -30,6 +29,7 @@ import { DOCS_URL, PROJECT_STATUS } from 'lib/constants' import { getDatabaseMajorVersion } from 'lib/helpers' import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Button } from 'ui' import { Admonition } from 'ui-patterns/admonition' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { PreviousRestoreItem } from './PreviousRestoreItem' export const RestoreToNewProject = () => { diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRowSkeleton.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRowSkeleton.tsx index 1b127aae5d..386d40df4f 100644 --- a/apps/studio/components/interfaces/Database/Roles/RoleRowSkeleton.tsx +++ b/apps/studio/components/interfaces/Database/Roles/RoleRowSkeleton.tsx @@ -1,6 +1,6 @@ -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { ChevronUp } from 'lucide-react' import { cn } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export interface RoleRowSkeletonProps { index?: number diff --git a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx index 65659265a2..26fe813f5b 100644 --- a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx @@ -10,7 +10,6 @@ import Table from 'components/to-be-cleaned/Table' import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { NoSearchResults } from 'components/ui/NoSearchResults' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useTableEditorQuery } from 'data/table-editor/table-editor-query' import { isTableLike } from 'data/table-editor/table-editor-types' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -27,6 +26,7 @@ import { TooltipContent, TooltipTrigger, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning' interface ColumnListProps { diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx index 2a5c329105..330a50fbdf 100644 --- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx @@ -25,7 +25,6 @@ import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip' import { EntityTypeIcon } from 'components/ui/EntityTypeIcon' import SchemaSelector from 'components/ui/SchemaSelector' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query' import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants' import { useForeignTablesQuery } from 'data/foreign-tables/foreign-tables-query' @@ -61,6 +60,7 @@ import { TooltipContent, TooltipTrigger, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning' import { formatAllEntities } from './Tables.utils' diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx index 9475baaac1..c5d4f7183b 100644 --- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx +++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx @@ -13,7 +13,6 @@ import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/Lay import AlertError from 'components/ui/AlertError' import SchemaSelector from 'components/ui/SchemaSelector' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation' import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query' import { useTablesQuery } from 'data/tables/tables-query' @@ -27,6 +26,7 @@ import { useEditorPanelStateSnapshot } from 'state/editor-panel-state' import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' import { Card, Input, Table, TableBody, TableHead, TableHeader, TableRow } from 'ui' import { EmptyStatePresentational } from 'ui-patterns' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { CreateTriggerButtons } from './CreateTriggerButtons' import { TriggerList } from './TriggerList' import { generateTriggerCreateSQL } from './TriggerList.utils' diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx index 0863fed762..71387ce21f 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx @@ -6,7 +6,6 @@ import { toast } from 'sonner' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useSecretsDeleteMutation } from 'data/secrets/secrets-delete-mutation' import { useSecretsQuery } from 'data/secrets/secrets-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -14,6 +13,7 @@ import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQuer import { Badge, Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import AddNewSecretForm from './AddNewSecretForm' import EdgeFunctionSecret from './EdgeFunctionSecret' import { EditSecretSheet } from './EditSecretSheet' diff --git a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx index ebae4d400a..3e5f9cd329 100644 --- a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx +++ b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx @@ -29,7 +29,7 @@ import { TabsList_Shadcn_ as TabsList, TabsTrigger_Shadcn_ as TabsTrigger, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface SlowQuery { rolname: string diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx index 8802b58620..8560ca79a4 100644 --- a/apps/studio/components/interfaces/Home/Home.tsx +++ b/apps/studio/components/interfaces/Home/Home.tsx @@ -36,7 +36,7 @@ import { TooltipContent, TooltipTrigger, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const Home = () => { const { data: project } = useSelectedProjectQuery() diff --git a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx b/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx index 8a63f02555..0eff936d44 100644 --- a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx +++ b/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx @@ -13,7 +13,7 @@ import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state' import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' import { AiIconAnimation, Button, Card, CardContent, CardHeader, CardTitle } from 'ui' import { Row } from 'ui-patterns' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { Markdown } from '../Markdown' export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: boolean }) => { diff --git a/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx b/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx index dcaeddc0e9..b43172a0a8 100644 --- a/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx +++ b/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx @@ -19,7 +19,7 @@ import { DropdownMenuTrigger, ScrollArea, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' type SnippetDropdownProps = { projectRef?: string diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx index de74a74cf6..20bd50c3d0 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx @@ -34,7 +34,7 @@ import { PageHeaderSummary, PageHeaderTitle, } from 'ui-patterns/PageHeader' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { CreateCronJobSheet } from './CreateCronJobSheet/CreateCronJobSheet' import { isSecondsFormat, parseCronJobCommand } from './CronJobs.utils' import { PreviousRunsTab } from './PreviousRunsTab' diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx index edfa42031b..c674aa4e87 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx @@ -9,7 +9,6 @@ import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import { CreateCronJobSheet } from 'components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useCronJobsCountQuery } from 'data/database-cron-jobs/database-cron-jobs-count-query' import { CronJob, @@ -26,6 +25,7 @@ import { cleanPointerEventsNoneOnBody, isAtBottom } from 'lib/helpers' import { Button, cn, LoadingLine, Sheet, SheetContent } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { formatCronJobColumns } from './CronJobs.utils' import { DeleteCronJob } from './DeleteCronJob' diff --git a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx index 4d65a4223a..82fdcd2a73 100644 --- a/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx +++ b/apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx @@ -5,7 +5,7 @@ import Link from 'next/link' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { BASE_PATH } from 'lib/constants' import { Badge, Card, CardContent, cn } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { IntegrationDefinition } from './Integrations.constants' type IntegrationCardProps = IntegrationDefinition & { diff --git a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx index 9bbbe0fd53..71e865542a 100644 --- a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx +++ b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx @@ -3,9 +3,9 @@ import dynamic from 'next/dynamic' import Image from 'next/image' import { ComponentType, ReactNode } from 'react' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { BASE_PATH, DOCS_URL } from 'lib/constants' import { cn } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { UpgradeDatabaseAlert } from '../Queues/UpgradeDatabaseAlert' import { WRAPPERS } from '../Wrappers/Wrappers.constants' import { WrapperMeta } from '../Wrappers/Wrappers.types' diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx index 152d19936a..c55b11438d 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx @@ -30,7 +30,7 @@ import { Separator, } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const QueueTab = () => { const { childId: queueName, ref } = useParams() diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx index 56ccdc6721..d64369c049 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx @@ -6,11 +6,11 @@ import DataGrid, { Row } from 'react-data-grid' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useQueuesQuery } from 'data/database-queues/database-queues-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { Button, cn, LoadingLine } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { CreateQueueSheet } from './CreateQueueSheet' import { formatQueueColumns, prepareQueuesForDataGrid } from './Queues.utils' diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx index da65aa3ea8..c2c02f11dc 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx @@ -42,7 +42,7 @@ import { TooltipTrigger, } from 'ui' import { Admonition } from 'ui-patterns/admonition' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { getQueueFunctionsMapping } from './Queue.utils' const ACTIONS = ['select', 'insert', 'update', 'delete'] diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx index 608c3b77fd..3461593c4d 100644 --- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx @@ -5,7 +5,6 @@ import { type SubmitHandler, useForm } from 'react-hook-form' import { toast } from 'sonner' import { z } from 'zod' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useVaultSecretDecryptedValueQuery } from 'data/vault/vault-secret-decrypted-value-query' import { useVaultSecretUpdateMutation } from 'data/vault/vault-secret-update-mutation' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' @@ -25,6 +24,7 @@ import { Input_Shadcn_, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' interface EditSecretModalProps { visible: boolean diff --git a/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx index 1392c24c37..ce58949c52 100644 --- a/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx +++ b/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx @@ -4,12 +4,12 @@ import { toast } from 'sonner' import { useParams } from 'common' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useHooksEnableMutation } from 'data/database/hooks-enable-mutation' import { useSchemasQuery } from 'data/database/schemas-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { Admonition } from 'ui-patterns' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab' export const WebhooksOverviewTab = () => { diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx index d9be6b7487..5684902678 100644 --- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx +++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx @@ -2,7 +2,6 @@ import { Check, ChevronsUpDown, Database, Plus } from 'lucide-react' import { useEffect, useState } from 'react' import { ActionBar } from 'components/interfaces/TableGridEditor/SidePanelEditor/ActionBar' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useSchemasQuery } from 'data/database/schemas-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { @@ -25,6 +24,7 @@ import { ScrollArea, SidePanel, } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import WrapperDynamicColumns from './WrapperDynamicColumns' import type { Table, TableOption } from './Wrappers.types' import { makeValidateRequired } from './Wrappers.utils' diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx index db94752f49..d10fe19b30 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx @@ -5,7 +5,6 @@ import { useMemo, useState } from 'react' import { toast } from 'sonner' import { useFlag, useParams } from 'common' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper' import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query' import { useJWTSigningKeyDeleteMutation } from 'data/jwt-signing-keys/jwt-signing-key-delete-mutation' @@ -39,6 +38,7 @@ import { TableHeader, TableRow, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { SigningKeysComingSoonBanner } from '../signing-keys-coming-soon' import { StartUsingJwtSigningKeysBanner } from '../start-using-keys-banner' import { ActionPanel } from './action-panel' diff --git a/apps/studio/components/interfaces/Linter/LintPageTabs.tsx b/apps/studio/components/interfaces/Linter/LintPageTabs.tsx index e4c5b9cb97..7a3b27d39e 100644 --- a/apps/studio/components/interfaces/Linter/LintPageTabs.tsx +++ b/apps/studio/components/interfaces/Linter/LintPageTabs.tsx @@ -13,9 +13,9 @@ import { } from 'ui' import { LINTER_LEVELS, LINT_TABS } from 'components/interfaces/Linter/Linter.constants' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { Lint } from 'data/lint/lint-query' import { useRouter } from 'next/router' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface LintPageTabsProps { currentTab: string diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx index 6329a83e10..784883f2fc 100644 --- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx +++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx @@ -15,7 +15,6 @@ import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { FilterPopover } from 'components/ui/FilterPopover' import NoPermission from 'components/ui/NoPermission' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useOrganizationRolesV2Query } from 'data/organization-members/organization-roles-query' import { @@ -34,6 +33,7 @@ import { Button, WarningIcon, } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' const logsUpgradeError = 'upgrade to Team or Enterprise Plan to access audit logs.' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx index cd7ff78001..490810947c 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx @@ -10,13 +10,13 @@ import { } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import NoPermission from 'components/ui/NoPermission' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import SparkBar from 'components/ui/SparkBar' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { MANAGED_BY } from 'lib/constants/infrastructure' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import UpcomingInvoice from './UpcomingInvoice' const BillingBreakdown = () => { diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx index 46d8ab146b..21788d9aef 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx @@ -1,7 +1,6 @@ import Link from 'next/link' import AlertError from 'components/ui/AlertError' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { PricingMetric } from 'data/analytics/org-daily-stats-query' import { UpcomingInvoiceResponse, @@ -12,6 +11,7 @@ import { formatCurrency } from 'lib/helpers' import React from 'react' import { Table, TableBody, TableCell, TableFooter, TableRow } from 'ui' import { InfoTooltip } from 'ui-patterns/info-tooltip' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { billingMetricUnit, formatUsage } from '../helpers' export interface UpcomingInvoiceProps { diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx index 8a555aa407..2c058bb94e 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx @@ -11,7 +11,6 @@ import { import AlertError from 'components/ui/AlertError' import NoPermission from 'components/ui/NoPermission' import PartnerManagedResource from 'components/ui/PartnerManagedResource' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrganizationCustomerProfileQuery } from 'data/organizations/organization-customer-profile-query' import { useOrganizationCustomerProfileUpdateMutation } from 'data/organizations/organization-customer-profile-update-mutation' import { useOrganizationTaxIdQuery } from 'data/organizations/organization-tax-id-query' @@ -19,6 +18,7 @@ import { useOrganizationTaxIdUpdateMutation } from 'data/organizations/organizat import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { Button, Card, CardFooter, Form_Shadcn_ as Form } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { BillingCustomerDataForm, type BillingCustomerDataFormValues, diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx index f49b33aa73..332e9c7cc8 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx @@ -14,7 +14,6 @@ import AlertError from 'components/ui/AlertError' import NoPermission from 'components/ui/NoPermission' import PartnerIcon from 'components/ui/PartnerIcon' import { PARTNER_TO_NAME } from 'components/ui/PartnerManagedResource' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' @@ -22,6 +21,7 @@ import { BASE_PATH, DOCS_URL } from 'lib/constants' import { MANAGED_BY } from 'lib/constants/infrastructure' import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings' import { Alert, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import ProjectUpdateDisabledTooltip from '../ProjectUpdateDisabledTooltip' import SpendCapSidePanel from './SpendCapSidePanel' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx index aca7641708..b756b6639b 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx @@ -24,7 +24,7 @@ import { SetupIntentResponse } from 'data/stripe/setup-intent-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { BASE_PATH, STRIPE_PUBLIC_KEY } from 'lib/constants' import { Checkbox_Shadcn_, Listbox } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { NewPaymentMethodElement, type PaymentMethodElementRef, diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx index a8fd170f8f..3c6b01b2fa 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx @@ -10,7 +10,6 @@ import { getPlanChangeType } from 'components/interfaces/Billing/Subscription/Su import { ButtonTooltip } from 'components/ui/ButtonTooltip' import PartnerManagedResource from 'components/ui/PartnerManagedResource' import { RequestUpgradeToBillingOwners } from 'components/ui/RequestUpgradeToBillingOwners' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query' import { useOrganizationBillingSubscriptionPreview } from 'data/organizations/organization-billing-subscription-preview' import { useOrganizationQuery } from 'data/organizations/organization-query' @@ -27,6 +26,7 @@ import { plans as subscriptionsPlans } from 'shared-data/plans' import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings' import { Organization } from 'types/base' import { Button, SidePanel, cn } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import DowngradeModal from './DowngradeModal' import { EnterpriseCard } from './EnterpriseCard' import { ExitSurveyModal } from './ExitSurveyModal' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx index 6b0f5061a0..8494343da2 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx @@ -10,12 +10,12 @@ import { } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import NoPermission from 'components/ui/NoPermission' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings' import { Alert, Button } from 'ui' import { Admonition } from 'ui-patterns' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import ProjectUpdateDisabledTooltip from '../ProjectUpdateDisabledTooltip' import { Restriction } from '../Restriction' import { PlanUpdateSidePanel } from './PlanUpdateSidePanel' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx index 524951f996..db232345f9 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx @@ -12,7 +12,6 @@ import { getPlanChangeType, } from 'components/interfaces/Billing/Subscription/Subscription.utils' import AlertError from 'components/ui/AlertError' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { OrganizationBillingSubscriptionPreviewResponse } from 'data/organizations/organization-billing-subscription-preview' import { OrgProject } from 'data/projects/org-projects-infinite-query' import { useConfirmPendingSubscriptionChangeMutation } from 'data/subscriptions/org-subscription-confirm-pending-change' @@ -31,6 +30,7 @@ import { plans as subscriptionsPlans } from 'shared-data/plans' import { Button, Dialog, DialogContent, Table, TableBody, TableCell, TableRow } from 'ui' import { Admonition } from 'ui-patterns' import { InfoTooltip } from 'ui-patterns/info-tooltip' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import type { PaymentMethodElementRef } from '../../../Billing/Payment/PaymentMethods/NewPaymentMethodElement' import PaymentMethodSelection from './PaymentMethodSelection' diff --git a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx index 86de90ef1f..7c77b0d90b 100644 --- a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx +++ b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx @@ -16,7 +16,7 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { Button } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const SOC2 = () => { const { data: organization } = useSelectedOrganizationQuery() diff --git a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx index e91c8735f4..f7c8412996 100644 --- a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx +++ b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx @@ -14,7 +14,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { Button } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const SecurityQuestionnaire = () => { const { data: organization } = useSelectedOrganizationQuery() diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx index 04452114ea..4a216e6ffe 100644 --- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx +++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx @@ -27,7 +27,7 @@ import { TableHeader, TableRow, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import InvoicePayButton from './InvoicePayButton' const PAGE_LIMIT = 5 diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx index fd14a603a1..17312e0b46 100644 --- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx +++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx @@ -9,12 +9,12 @@ import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import CopyButton from 'components/ui/CopyButton' import NoPermission from 'components/ui/NoPermission' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { AuthorizedApp, useAuthorizedAppsQuery } from 'data/oauth/authorized-apps-query' import { OAuthAppCreateResponse } from 'data/oauth/oauth-app-create-mutation' import { OAuthApp, useOAuthAppsQuery } from 'data/oauth/oauth-apps-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { Button, cn } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { AuthorizedAppRow } from './AuthorizedAppRow' import { DeleteAppModal } from './DeleteAppModal' import { OAuthAppRow } from './OAuthAppRow' diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx index bfd5c0456f..753af528fc 100644 --- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx +++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx @@ -6,7 +6,6 @@ import z from 'zod' import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useSSOConfigCreateMutation } from 'data/sso/sso-config-create-mutation' import { useOrgSSOConfigQuery } from 'data/sso/sso-config-query' @@ -25,6 +24,7 @@ import { Switch, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { AttributeMapping } from './AttributeMapping' import { JoinOrganizationOnSignup } from './JoinOrganizationOnSignup' import { SSODomains } from './SSODomains' diff --git a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx index d7423c28e4..e929ffdc2b 100644 --- a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx +++ b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx @@ -10,7 +10,6 @@ import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useOrganizationMembersQuery } from 'data/organizations/organization-members-query' import { useOrganizationMfaToggleMutation } from 'data/organizations/organization-mfa-mutation' @@ -33,6 +32,7 @@ import { TooltipTrigger, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const schema = z.object({ enforceMfa: z.boolean(), diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx index fbea924889..6592bf3696 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx @@ -21,7 +21,7 @@ import { TableRow, cn, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { isInviteExpired } from '../Organization.utils' import { MemberActions } from './MemberActions' diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx index 5f8accf7e0..97042788b4 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx @@ -2,7 +2,6 @@ import { AlertCircle, HelpCircle } from 'lucide-react' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useOrganizationRolesV2Query } from 'data/organization-members/organization-roles-query' import { useOrganizationMembersQuery } from 'data/organizations/organization-members-query' import { DOCS_URL } from 'lib/constants' @@ -24,6 +23,7 @@ import { TooltipTrigger, } from 'ui' import { Admonition } from 'ui-patterns' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { MemberRow } from './MemberRow' export interface MembersViewProps { diff --git a/apps/studio/components/interfaces/Organization/Usage/ActiveCompute.tsx b/apps/studio/components/interfaces/Organization/Usage/ActiveCompute.tsx index b3c34fea54..4ecc467976 100644 --- a/apps/studio/components/interfaces/Organization/Usage/ActiveCompute.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/ActiveCompute.tsx @@ -2,14 +2,14 @@ import { BarChart2 } from 'lucide-react' import { useMemo } from 'react' import Panel from 'components/ui/Panel' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { DataPoint } from 'data/analytics/constants' import { PricingMetric, type OrgDailyUsageResponse } from 'data/analytics/org-daily-stats-query' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { DOCS_URL } from 'lib/constants' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { SectionContent } from './SectionContent' -import UsageBarChart from './UsageBarChart' import { dailyUsageToDataPoints } from './Usage.utils' +import UsageBarChart from './UsageBarChart' export interface ComputeProps { orgDailyStats: OrgDailyUsageResponse | undefined diff --git a/apps/studio/components/interfaces/Organization/Usage/Compute.tsx b/apps/studio/components/interfaces/Organization/Usage/Compute.tsx index 9fc7167887..154440bdca 100644 --- a/apps/studio/components/interfaces/Organization/Usage/Compute.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/Compute.tsx @@ -2,7 +2,6 @@ import { BarChart2 } from 'lucide-react' import { useMemo } from 'react' import Panel from 'components/ui/Panel' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { DataPoint } from 'data/analytics/constants' import { ComputeUsageMetric, @@ -11,10 +10,11 @@ import { } from 'data/analytics/org-daily-stats-query' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { DOCS_URL } from 'lib/constants' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { SectionContent } from './SectionContent' import { Attribute, AttributeColor } from './Usage.constants' -import UsageBarChart from './UsageBarChart' import { dailyUsageToDataPoints } from './Usage.utils' +import UsageBarChart from './UsageBarChart' export interface ComputeProps { orgDailyStats: OrgDailyUsageResponse | undefined diff --git a/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx index 8e8c93deb4..3361b0a66f 100644 --- a/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx @@ -2,7 +2,6 @@ import { useMemo } from 'react' import { useBreakpoint } from 'common' import AlertError from 'components/ui/AlertError' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { ComputeUsageMetric, computeUsageMetricLabel, @@ -13,6 +12,7 @@ import { useOrgUsageQuery } from 'data/usage/org-usage-query' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { DOCS_URL } from 'lib/constants' import { cn } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { BILLING_BREAKDOWN_METRICS } from '../BillingSettings/BillingBreakdown/BillingBreakdown.constants' import { BillingMetric } from '../BillingSettings/BillingBreakdown/BillingMetric' import { ComputeMetric } from '../BillingSettings/BillingBreakdown/ComputeMetric' diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx index c07c217e61..c6e1c0867d 100644 --- a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx @@ -14,7 +14,6 @@ import AlertError from 'components/ui/AlertError' import DateRangePicker from 'components/ui/DateRangePicker' import NoPermission from 'components/ui/NoPermission' import { OrganizationProjectSelector } from 'components/ui/OrganizationProjectSelector' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrgDailyStatsQuery } from 'data/analytics/org-daily-stats-query' import { useProjectDetailQuery } from 'data/projects/project-detail-query' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' @@ -24,14 +23,15 @@ import { Check, ChevronDown } from 'lucide-react' import { useQueryState } from 'nuqs' import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui' import { Admonition } from 'ui-patterns' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { Restriction } from '../BillingSettings/Restriction' +import ActiveCompute from './ActiveCompute' import Activity from './Activity' import Compute from './Compute' import Egress from './Egress' +import OrgLogUsage from './OrgLogUsage' import SizeAndCounts from './SizeAndCounts' import { TotalUsage } from './TotalUsage' -import ActiveCompute from './ActiveCompute' -import OrgLogUsage from './OrgLogUsage' export const Usage = () => { const { slug } = useParams() diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx index b87e27d654..ec8fc6785d 100644 --- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx @@ -4,13 +4,13 @@ import { useMemo } from 'react' import AlertError from 'components/ui/AlertError' import Panel from 'components/ui/Panel' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import SparkBar from 'components/ui/SparkBar' import type { OrgSubscription } from 'data/subscriptions/types' import type { OrgMetricsUsage, OrgUsageResponse } from 'data/usage/org-usage-query' import { USAGE_APPROACHING_THRESHOLD } from 'lib/constants' import type { ResponseError } from 'types' import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { SectionContent } from '../SectionContent' import { CategoryAttribute } from '../Usage.constants' import { diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx index 7ab1ed539b..aab685521e 100644 --- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx @@ -4,7 +4,6 @@ import { useMemo } from 'react' import AlertError from 'components/ui/AlertError' import Panel from 'components/ui/Panel' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { PricingMetric } from 'data/analytics/org-daily-stats-query' import { useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query' import type { OrgSubscription } from 'data/subscriptions/types' @@ -18,6 +17,7 @@ import { CriticalIcon, } from 'ui' import { InfoTooltip } from 'ui-patterns/info-tooltip' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { SectionContent } from '../SectionContent' import { CategoryAttribute } from '../Usage.constants' diff --git a/apps/studio/components/interfaces/Realtime/Policies.tsx b/apps/studio/components/interfaces/Realtime/Policies.tsx index 2c62ebb7a4..5b1a4c061e 100644 --- a/apps/studio/components/interfaces/Realtime/Policies.tsx +++ b/apps/studio/components/interfaces/Realtime/Policies.tsx @@ -5,11 +5,11 @@ import { Policies } from 'components/interfaces/Auth/Policies/Policies' import { PoliciesDataProvider } from 'components/interfaces/Auth/Policies/PoliciesDataContext' import { PolicyEditorPanel } from 'components/interfaces/Auth/Policies/PolicyEditorPanel' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' 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 { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' export const RealtimePolicies = () => { const { data: project } = useSelectedProjectQuery() diff --git a/apps/studio/components/interfaces/Reports/MetricOptions.tsx b/apps/studio/components/interfaces/Reports/MetricOptions.tsx index 356ae4b78f..8ebe236af4 100644 --- a/apps/studio/components/interfaces/Reports/MetricOptions.tsx +++ b/apps/studio/components/interfaces/Reports/MetricOptions.tsx @@ -23,7 +23,7 @@ import { DropdownMenuSubTrigger, SQL_ICON, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { DEPRECATED_REPORTS } from './Reports.constants' interface MetricOptionsProps { diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx index 035f592f91..d3c260980c 100644 --- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -24,7 +24,6 @@ import { } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import ShimmeringLoader, { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { mapResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { useInfraMonitoringAttributesQuery } from 'data/analytics/infra-monitoring-query' import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query' @@ -41,6 +40,7 @@ import { getDatabaseMajorVersion, getSemanticVersion } from 'lib/helpers' import { useAddonsPagePanel } from 'state/addons-page' import { Alert, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' import { ComputeBadge } from 'ui-patterns/ComputeBadge' +import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import CustomDomainSidePanel from './CustomDomainSidePanel' import IPv4SidePanel from './IPv4SidePanel' import PITRSidePanel from './PITRSidePanel' diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx index 10b7e31463..bb8a3a6b93 100644 --- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx +++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx @@ -35,7 +35,7 @@ import { } from 'ui' import { Admonition } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { POOLING_OPTIMIZATIONS } from './ConnectionPooling.constants' const formId = 'pooling-configuration-form' diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx index 972820c7a7..7ea1b36816 100644 --- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx +++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx @@ -24,7 +24,7 @@ import { Modal, WarningIcon, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export interface DiskSizeConfigurationProps { visible: boolean diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx index 0d11d6dc1d..08ce91a7f6 100644 --- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx +++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx @@ -5,7 +5,6 @@ import { useState } from 'react' import { useParams } from 'common' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { DocsButton } from 'components/ui/DocsButton' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useNetworkRestrictionsQuery } from 'data/network-restrictions/network-restrictions-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' @@ -25,10 +24,6 @@ import { TooltipContent, TooltipTrigger, } from 'ui' -import AddRestrictionModal from './AddRestrictionModal' -import AllowAllModal from './AllowAllModal' -import DisallowAllModal from './DisallowAllModal' -import RemoveRestrictionModal from './RemoveRestrictionModal' import { PageSection, PageSectionAside, @@ -37,6 +32,11 @@ import { PageSectionSummary, PageSectionTitle, } from 'ui-patterns' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' +import AddRestrictionModal from './AddRestrictionModal' +import AllowAllModal from './AllowAllModal' +import DisallowAllModal from './DisallowAllModal' +import RemoveRestrictionModal from './RemoveRestrictionModal' interface AccessButtonProps { disabled: boolean diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx index 5b65d5ca15..42ae983f72 100644 --- a/apps/studio/components/interfaces/Settings/General/General.tsx +++ b/apps/studio/components/interfaces/Settings/General/General.tsx @@ -6,7 +6,6 @@ import { useForm } from 'react-hook-form' import { toast } from 'sonner' import * as z from 'zod' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useProjectUpdateMutation } from 'data/projects/project-update-mutation' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' @@ -37,6 +36,7 @@ import { PageSectionSummary, PageSectionTitle, } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import PauseProjectButton from './Infrastructure/PauseProjectButton' import RestartServerButton from './Infrastructure/RestartServerButton' diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx index 5370be4b0f..840209723c 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx @@ -21,7 +21,6 @@ import { DatabaseSelector } from 'components/ui/DatabaseSelector' import { DateRangePicker } from 'components/ui/DateRangePicker' import { DocsButton } from 'components/ui/DocsButton' import Panel from 'components/ui/Panel' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { DataPoint } from 'data/analytics/constants' import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { @@ -37,6 +36,7 @@ import { DOCS_URL, INSTANCE_MICRO_SPECS, INSTANCE_NANO_SPECS, InstanceSpecs } fr import { TIME_PERIODS_BILLING, TIME_PERIODS_REPORTS } from 'lib/constants/metrics' import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' import { Admonition } from 'ui-patterns/admonition' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { INFRA_ACTIVITY_METRICS } from './Infrastructure.constants' import { useShowNewReplicaPanel } from './InfrastructureConfiguration/use-show-new-replica' diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx index 55ad91726e..1210d9e6de 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx @@ -7,7 +7,6 @@ import { ScaffoldSectionDetail, } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-eligibility-query' import { useProjectServiceVersionsQuery } from 'data/projects/project-service-versions' import { useReadReplicasQuery } from 'data/read-replicas/replicas-query' @@ -23,6 +22,7 @@ import { TooltipContent, TooltipTrigger, } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ProjectUpgradeAlert } from '../General/Infrastructure/ProjectUpgradeAlert' import { InstanceConfiguration } from './InfrastructureConfiguration/InstanceConfiguration' import { diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx index d10dbf95e3..5c9d4371a3 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx @@ -18,7 +18,6 @@ import { ScaffoldSectionDetail, } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only' import { useIntegrationsVercelInstalledConnectionDeleteMutation } from 'data/integrations/integrations-vercel-installed-connection-delete-mutation' import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query' @@ -34,6 +33,7 @@ import { pluralize } from 'lib/helpers' import { getIntegrationConfigurationUrl } from 'lib/integration-utils' import { useSidePanelsStateSnapshot } from 'state/side-panels' import { Button, cn } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { IntegrationImageHandler } from '../IntegrationsSettings' import VercelIntegrationConnectionForm from './VercelIntegrationConnectionForm' diff --git a/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx b/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx index 8c851b4ce7..7ba173ef1e 100644 --- a/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx @@ -13,7 +13,7 @@ import { DialogHeader, DialogTitle, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface ErrorCodeDialogProps { open: boolean diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx index 2247c75d26..3bb9fa558d 100644 --- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx +++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx @@ -11,13 +11,13 @@ import z from 'zod' import { SupportCategories } from '@supabase/shared-types/out/constants' import { useAuthError } from 'common' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useMfaChallengeAndVerifyMutation } from 'data/profile/mfa-challenge-and-verify-mutation' import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query' import { useSignOut } from 'lib/auth' import { getReturnToPath } from 'lib/gotrue' import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { SupportLink } from '../Support/SupportLink' const schema = z.object({ diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx index 03c0478458..2c3f32eff4 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx @@ -6,7 +6,6 @@ import { useState } from 'react' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import { AlphaNotice } from 'components/ui/AlphaNotice' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query' import { useAnalyticsBucketsQuery } from 'data/storage/analytics-buckets-query' import { AnalyticsBucket as AnalyticsBucketIcon } from 'icons' @@ -27,6 +26,7 @@ import { TimestampInfo } from 'ui-patterns' import { Input } from 'ui-patterns/DataInputs/Input' import { PageContainer } from 'ui-patterns/PageContainer' import { PageSection, PageSectionContent, PageSectionTitle } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { EmptyBucketState } from '../EmptyBucketState' import { CreateBucketButton } from '../NewBucketButton' import { CreateAnalyticsBucketModal } from './CreateAnalyticsBucketModal' diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx index ac3d60c470..85c93a6e4d 100644 --- a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx @@ -5,7 +5,6 @@ import { useCallback, useMemo, useState } from 'react' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query' import { usePaginatedBucketsQuery } from 'data/storage/buckets-query' import { IS_PLATFORM } from 'lib/constants' @@ -25,6 +24,7 @@ import { Admonition } from 'ui-patterns' import { Input } from 'ui-patterns/DataInputs/Input' import { PageContainer } from 'ui-patterns/PageContainer' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { CreateBucketModal } from '../CreateBucketModal' import { EmptyBucketState } from '../EmptyBucketState' import { CreateBucketButton } from '../NewBucketButton' diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx index 233e8b7142..52a77b63d1 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx @@ -7,12 +7,12 @@ import { useContextMenu } from 'react-contexify' import { toast } from 'sonner' import { InfiniteListDefault, LoaderForIconMenuItems } from 'components/ui/InfiniteList' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { BASE_PATH } from 'lib/constants' import { formatBytes } from 'lib/helpers' import { useStorageExplorerStateSnapshot } from 'state/storage-explorer' import { Checkbox, cn } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { CONTEXT_MENU_KEYS, STORAGE_ROW_STATUS, diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx index bd53ea5f3b..dcfd85b50a 100644 --- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx +++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx @@ -9,7 +9,6 @@ import { useFlag, useParams } from 'common' import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query' import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation' @@ -40,6 +39,7 @@ import { import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { PageContainer } from 'ui-patterns/PageContainer' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { StorageFileSizeLimitErrorMessage } from './StorageFileSizeLimitErrorMessage' import { StorageListV2MigratingCallout, diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx index 080624cd20..85c98c0aa9 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx @@ -6,7 +6,6 @@ import { useState, type KeyboardEvent, type MouseEvent } from 'react' import { useParams } from 'common' import AlertError from 'components/ui/AlertError' import { AlphaNotice } from 'components/ui/AlphaNotice' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useVectorBucketsQuery } from 'data/storage/vector-buckets-query' import { VectorBucket as VectorBucketIcon } from 'icons' import { BASE_PATH } from 'lib/constants' @@ -14,6 +13,7 @@ import { Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } f import { Input } from 'ui-patterns/DataInputs/Input' import { PageContainer } from 'ui-patterns/PageContainer' import { PageSection, PageSectionContent, PageSectionTitle } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { TimestampInfo } from 'ui-patterns/TimestampInfo' import { EmptyBucketState } from '../EmptyBucketState' import { CreateBucketButton } from '../NewBucketButton' diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx index ccbd0807b1..75f1257da9 100644 --- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx +++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx @@ -20,7 +20,7 @@ import { } from 'ui' import { Admonition } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { useHighlightProjectRefContext } from './HighlightContext' import type { ExtendedSupportCategories } from './Support.constants' import type { SupportFormValues } from './SupportForm.schema' diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx index 8eeb36e078..73ac7f8475 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx @@ -2,11 +2,11 @@ import { useState } from 'react' import { Button } from 'ui' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useForeignKeyConstraintsQuery } from 'data/database/foreign-key-constraints-query' import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import type { ResponseError } from 'types' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ForeignKeySelector } from '../../ForeignKeySelector/ForeignKeySelector' import type { ForeignKey } from '../../ForeignKeySelector/ForeignKeySelector.types' import type { TableField } from '../TableEditor.types' diff --git a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx index f424dc65ba..74f01addd8 100644 --- a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx @@ -5,7 +5,6 @@ import { useMemo, useRef } from 'react' import { useParams } from 'common' import { Footer } from 'components/grid/components/footer/Footer' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useTableDefinitionQuery } from 'data/database/table-definition-query' import { useViewDefinitionQuery } from 'data/database/view-definition-query' import { @@ -19,6 +18,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { formatSql } from 'lib/formatSql' import { timeout } from 'lib/helpers' import { Button } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' export interface TableDefinitionProps { entity?: Entity diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx index 8ffd180568..88d26f753c 100644 --- a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx @@ -12,7 +12,6 @@ import { useRouter } from 'next/router' import { useState } from 'react' import { useParams } from 'common' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { Branch, useBranchesQuery } from 'data/branches/branches-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { useAppStateSnapshot } from 'state/app-state' @@ -32,6 +31,7 @@ import { ScrollArea, cn, } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { sanitizeRoute } from './ProjectDropdown' const BranchLink = ({ diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx index 812f90a6b1..588ddfffd2 100644 --- a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx @@ -5,7 +5,6 @@ import { useState } from 'react' import { useParams } from 'common' import PartnerIcon from 'components/ui/PartnerIcon' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' @@ -25,6 +24,7 @@ import { ScrollArea, cn, } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const OrganizationDropdown = () => { const router = useRouter() diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx index b0c0af5bf8..a57db5640a 100644 --- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx @@ -6,13 +6,13 @@ import { useState } from 'react' import { useParams } from 'common' import { OrganizationProjectSelector } from 'components/ui/OrganizationProjectSelector' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useProjectDetailQuery } from 'data/projects/project-detail-query' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { IS_PLATFORM } from 'lib/constants' import { Button, CommandGroup_Shadcn_, CommandItem_Shadcn_, cn } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const sanitizeRoute = (route: string, routerQueries: ParsedUrlQuery) => { const queryArray = Object.entries(routerQueries) diff --git a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx index f8ccbd46b5..49ea48661b 100644 --- a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx +++ b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx @@ -9,7 +9,6 @@ import { useFlag, useParams } from 'common' import { CreateReportModal } from 'components/interfaces/Reports/CreateReportModal' import { UpdateCustomReportModal } from 'components/interfaces/Reports/UpdateModal' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useContentDeleteMutation } from 'data/content/content-delete-mutation' import { Content, useContentQuery } from 'data/content/content-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -18,6 +17,7 @@ import { useProfile } from 'lib/profile' import { Menu, cn } from 'ui' import { InnerSideBarEmptyPanel } from 'ui-patterns' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ObservabilityMenuItem } from './ObservabilityMenuItem' const ObservabilityMenu = () => { diff --git a/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx b/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx index 16d774c331..b498035749 100644 --- a/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx @@ -1,6 +1,6 @@ import { useParams } from 'common' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useProjectDetailQuery } from 'data/projects/project-detail-query' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const LoadingState = () => { const { ref } = useParams() diff --git a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx index 15cbe3c13e..8a4010e218 100644 --- a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx +++ b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx @@ -9,7 +9,6 @@ import { useFlag, useParams } from 'common' import { CreateReportModal } from 'components/interfaces/Reports/CreateReportModal' import { UpdateCustomReportModal } from 'components/interfaces/Reports/UpdateModal' import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useContentDeleteMutation } from 'data/content/content-delete-mutation' import { Content, useContentQuery } from 'data/content/content-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -17,6 +16,7 @@ import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useProfile } from 'lib/profile' import { Menu, cn } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ReportMenuItem } from './ReportMenuItem' const ReportsMenu = () => { diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx index 2a8e7a357d..c41ee1e344 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx @@ -10,7 +10,7 @@ import { useContentInfiniteQuery } from 'data/content/content-infinite-query' import { Snippet, SNIPPET_PAGE_LIMIT } from 'data/content/sql-folders-query' import { createTabId, useTabsStateSnapshot } from 'state/tabs' import { TreeView } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { DeleteSnippetsModal } from './DeleteSnippetsModal' import { formatFolderResponseForTreeView, getLastItemIds } from './SQLEditorNav.utils' import { SQLEditorTreeViewItem } from './SQLEditorTreeViewItem' diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx index 80ed25cc3d..a22babc88a 100644 --- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx +++ b/apps/studio/components/ui/ComputeBadgeWrapper.tsx @@ -10,7 +10,7 @@ import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils' import { INSTANCE_MICRO_SPECS } from 'lib/constants' import { Button, HoverCard, HoverCardContent, HoverCardTrigger, Separator } from 'ui' import { ComputeBadge } from 'ui-patterns/ComputeBadge' -import ShimmeringLoader from './ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' const Row = ({ label, stat }: { label: string; stat: React.ReactNode | string }) => { return ( diff --git a/apps/studio/components/ui/FilterPopover.tsx b/apps/studio/components/ui/FilterPopover.tsx index 6ac0bf7ae4..c2804fa1a7 100644 --- a/apps/studio/components/ui/FilterPopover.tsx +++ b/apps/studio/components/ui/FilterPopover.tsx @@ -2,6 +2,7 @@ import { useIntersectionObserver } from '@uidotdev/usehooks' import { noop } from 'lodash' import { X } from 'lucide-react' import { useEffect, useRef, useState } from 'react' + import { Button, Checkbox_Shadcn_, @@ -13,7 +14,7 @@ import { ScrollArea, } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface FilterPopoverProps { title?: string diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx index be069a415d..d49d54eaa3 100644 --- a/apps/studio/components/ui/OrganizationProjectSelector.tsx +++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx @@ -21,7 +21,7 @@ import { TooltipContent, TooltipTrigger, } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' interface OrganizationProjectSelectorSelectorProps { slug?: string diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx index ba211604c0..ed3784f987 100644 --- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx +++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx @@ -8,7 +8,7 @@ import { ChartConfig } from 'components/interfaces/SQLEditor/UtilityPanel/ChartC import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results' import { Badge, Button, ChartContainer, ChartTooltipContent, cn, CodeBlock } from 'ui' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ButtonTooltip } from '../ButtonTooltip' import { CHART_COLORS } from '../Charts/Charts.constants' import { SqlWarningAdmonition } from '../SqlWarningAdmonition' diff --git a/apps/studio/components/ui/ShimmeringLoader.tsx b/apps/studio/components/ui/ShimmeringLoader.tsx deleted file mode 100644 index 948711ba02..0000000000 --- a/apps/studio/components/ui/ShimmeringLoader.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { useSynchronizedAnimation } from 'hooks/misc/useSynchronizedAnimation' -import { cn } from 'ui' - -// [Joshen] Deprecate this file - this is declared in ui-patterns - -export interface ShimmeringLoader { - className?: string - delayIndex?: number - animationDelay?: number -} - -export const ShimmeringLoader = ({ - className, - delayIndex = 0, - animationDelay = 150, -}: ShimmeringLoader) => { - const ref = useSynchronizedAnimation('shimmer') - - return ( -
- ) -} - -export const GenericSkeletonLoader = () => ( -
- - - -
-) -export default ShimmeringLoader diff --git a/apps/studio/components/ui/org-selector.tsx b/apps/studio/components/ui/org-selector.tsx index d563cb74a6..1cc858f322 100644 --- a/apps/studio/components/ui/org-selector.tsx +++ b/apps/studio/components/ui/org-selector.tsx @@ -2,12 +2,12 @@ import { ChevronDown } from 'lucide-react' import Link from 'next/link' import { useMemo, useState } from 'react' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { parseAsString, useQueryState } from 'nuqs' import type { Organization } from 'types' import { Badge, Button, Card, CardHeader, CardTitle, Input_Shadcn_ } from 'ui' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ButtonTooltip } from './ButtonTooltip' export interface ProjectClaimChooseOrgProps { diff --git a/apps/studio/hooks/misc/useSynchronizedAnimation.ts b/apps/studio/hooks/misc/useSynchronizedAnimation.ts deleted file mode 100644 index 756a3ba62a..0000000000 --- a/apps/studio/hooks/misc/useSynchronizedAnimation.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { useIsomorphicLayoutEffect } from 'common' -import { useRef } from 'react' - -// Source: https://youtu.be/3kDVachh-BM - -let stashedTime: number | null = null - -export function useSynchronizedAnimation(name: string) { - const ref = useRef(null) - - useIsomorphicLayoutEffect(() => { - const animations = document - .getAnimations() - .filter( - (animation) => animation instanceof CSSAnimation && animation.animationName === 'shimmer' - ) - - const myAnimation = animations.find( - (animation) => - animation.effect instanceof KeyframeEffect && animation.effect.target === ref.current - ) - - if (myAnimation === undefined) { - return - } - - const leadAnimation = animations[0] - - if (myAnimation === leadAnimation && stashedTime) { - myAnimation.currentTime = stashedTime - } - - if (myAnimation !== leadAnimation) { - myAnimation.currentTime = leadAnimation.currentTime - } - - return () => { - if (myAnimation === leadAnimation && myAnimation.currentTime) { - stashedTime = Number(myAnimation.currentTime) - } - } - }, []) - - return ref -} diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx index 3f4c83199b..fad0d708fa 100644 --- a/apps/studio/pages/_app.tsx +++ b/apps/studio/pages/_app.tsx @@ -15,6 +15,7 @@ import 'styles/stripe.scss' import 'styles/toast.scss' import 'styles/typography.scss' import 'styles/ui.scss' +import 'ui-patterns/ShimmeringLoader/index.css' import 'ui/build/css/themes/dark.css' import 'ui/build/css/themes/light.css' diff --git a/apps/studio/pages/account/me.tsx b/apps/studio/pages/account/me.tsx index 9ebc82ef3a..d00ddf59c5 100644 --- a/apps/studio/pages/account/me.tsx +++ b/apps/studio/pages/account/me.tsx @@ -11,7 +11,6 @@ import AppLayout from 'components/layouts/AppLayout/AppLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import OrganizationLayout from 'components/layouts/OrganizationLayout' import AlertError from 'components/ui/AlertError' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useProfile } from 'lib/profile' import type { NextPageWithLayout } from 'types' @@ -24,6 +23,7 @@ import { PageHeaderSummary, PageHeaderTitle, } from 'ui-patterns/PageHeader' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const User: NextPageWithLayout = () => { return diff --git a/apps/studio/pages/authorize.tsx b/apps/studio/pages/authorize.tsx index 63ba3e39af..20eae2ef0e 100644 --- a/apps/studio/pages/authorize.tsx +++ b/apps/studio/pages/authorize.tsx @@ -10,7 +10,6 @@ import * as z from 'zod' import { useParams } from 'common' import { AuthorizeRequesterDetails } from 'components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails' import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useApiAuthorizationApproveMutation } from 'data/api-authorization/api-authorization-approve-mutation' import { useApiAuthorizationDeclineMutation } from 'data/api-authorization/api-authorization-decline-mutation' import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query' @@ -40,6 +39,7 @@ import { WarningIcon, } from 'ui' import { FormLayout } from 'ui-patterns/form/Layout/FormLayout' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' // Need to handle if no organizations in account // Need to handle if not logged in yet state diff --git a/apps/studio/pages/claim-project.tsx b/apps/studio/pages/claim-project.tsx index 400fe63f66..481f9b7578 100644 --- a/apps/studio/pages/claim-project.tsx +++ b/apps/studio/pages/claim-project.tsx @@ -6,7 +6,6 @@ import { ProjectClaimBenefits } from 'components/interfaces/Organization/Project import { ProjectClaimChooseOrg } from 'components/interfaces/Organization/ProjectClaim/choose-org' import { ProjectClaimConfirm } from 'components/interfaces/Organization/ProjectClaim/confirm' import { ProjectClaimLayout } from 'components/interfaces/Organization/ProjectClaim/layout' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query' import { useOrganizationProjectClaimQuery } from 'data/organizations/organization-project-claim-query' import { useOrganizationsQuery } from 'data/organizations/organizations-query' @@ -14,6 +13,7 @@ import { useCustomContent } from 'hooks/custom-content/useCustomContent' import { withAuth } from 'hooks/misc/withAuth' import type { NextPageWithLayout } from 'types' import { Admonition } from 'ui-patterns/admonition' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' const ClaimProjectPageLayout = ({ children }: PropsWithChildren) => { const { appTitle } = useCustomContent(['app:title']) diff --git a/apps/studio/pages/project/[ref]/auth/audit-logs.tsx b/apps/studio/pages/project/[ref]/auth/audit-logs.tsx index 7897a65e16..d3d5b1725e 100644 --- a/apps/studio/pages/project/[ref]/auth/audit-logs.tsx +++ b/apps/studio/pages/project/[ref]/auth/audit-logs.tsx @@ -5,7 +5,6 @@ import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' @@ -19,6 +18,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const AuditLogsPage: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( diff --git a/apps/studio/pages/project/[ref]/auth/mfa.tsx b/apps/studio/pages/project/[ref]/auth/mfa.tsx index 3b530fb2e9..f9237a052e 100644 --- a/apps/studio/pages/project/[ref]/auth/mfa.tsx +++ b/apps/studio/pages/project/[ref]/auth/mfa.tsx @@ -5,7 +5,6 @@ import { MfaAuthSettingsForm } from 'components/interfaces/Auth/MfaAuthSettingsF import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' @@ -19,6 +18,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const MfaPage: NextPageWithLayout = () => { const { ref } = useParams() diff --git a/apps/studio/pages/project/[ref]/auth/performance.tsx b/apps/studio/pages/project/[ref]/auth/performance.tsx index fdc3e3ffa4..745e9c45fd 100644 --- a/apps/studio/pages/project/[ref]/auth/performance.tsx +++ b/apps/studio/pages/project/[ref]/auth/performance.tsx @@ -5,7 +5,6 @@ import { PerformanceSettingsForm } from 'components/interfaces/Auth/PerformanceS import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' @@ -19,6 +18,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const PerformancePage: NextPageWithLayout = () => { const { ref } = useParams() diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx index 9d45512792..409a55ce33 100644 --- a/apps/studio/pages/project/[ref]/auth/policies.tsx +++ b/apps/studio/pages/project/[ref]/auth/policies.tsx @@ -18,7 +18,6 @@ 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 { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query' import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query' import { useTablesQuery } from 'data/tables/tables-query' @@ -42,6 +41,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' /** * Filter tables by table name and policy name diff --git a/apps/studio/pages/project/[ref]/auth/protection.tsx b/apps/studio/pages/project/[ref]/auth/protection.tsx index 967a9b15c0..7f1c666692 100644 --- a/apps/studio/pages/project/[ref]/auth/protection.tsx +++ b/apps/studio/pages/project/[ref]/auth/protection.tsx @@ -5,7 +5,6 @@ import { ProtectionAuthSettingsForm } from 'components/interfaces/Auth/Protectio import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' @@ -19,6 +18,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const ProtectionPage: NextPageWithLayout = () => { const { ref } = useParams() diff --git a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx index bb85a7b191..fd626ae0ee 100644 --- a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx +++ b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx @@ -6,7 +6,6 @@ import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' @@ -22,6 +21,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const RateLimitsPage: NextPageWithLayout = () => { const { ref } = useParams() diff --git a/apps/studio/pages/project/[ref]/auth/sessions.tsx b/apps/studio/pages/project/[ref]/auth/sessions.tsx index b1a1e58801..3d1751f787 100644 --- a/apps/studio/pages/project/[ref]/auth/sessions.tsx +++ b/apps/studio/pages/project/[ref]/auth/sessions.tsx @@ -4,7 +4,6 @@ import { SessionsAuthSettingsForm } from 'components/interfaces/Auth/SessionsAut import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' import { PageContainer } from 'ui-patterns/PageContainer' @@ -16,6 +15,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const SessionsPage: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( diff --git a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx index d74b75461a..9f74bc06b8 100644 --- a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx +++ b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx @@ -5,7 +5,6 @@ import SiteUrl from 'components/interfaces/Auth/SiteUrl/SiteUrl' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' import { PageContainer } from 'ui-patterns/PageContainer' @@ -17,6 +16,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const URLConfiguration: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( diff --git a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx index 7a255c6215..57337c4167 100644 --- a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx +++ b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx @@ -10,7 +10,6 @@ import DefaultLayout from 'components/layouts/DefaultLayout' import AlertError from 'components/ui/AlertError' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UpgradeToPro } from 'components/ui/UpgradeToPro' import { useBackupsQuery } from 'data/database/backups-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' @@ -29,6 +28,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const DatabasePhysicalBackups: NextPageWithLayout = () => { return ( diff --git a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx index 0d4a438adc..2ef5f010ce 100644 --- a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx +++ b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx @@ -10,7 +10,6 @@ import AlertError from 'components/ui/AlertError' import { DocsButton } from 'components/ui/DocsButton' import InformationBox from 'components/ui/InformationBox' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useBackupsQuery } from 'data/database/backups-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsOrioleDbInAws } from 'hooks/misc/useSelectedProject' @@ -26,6 +25,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const DatabaseScheduledBackups: NextPageWithLayout = () => { const { ref: projectRef } = useParams() diff --git a/apps/studio/pages/project/[ref]/database/column-privileges.tsx b/apps/studio/pages/project/[ref]/database/column-privileges.tsx index d5fb4f215f..f3f6422bab 100644 --- a/apps/studio/pages/project/[ref]/database/column-privileges.tsx +++ b/apps/studio/pages/project/[ref]/database/column-privileges.tsx @@ -22,7 +22,6 @@ import DefaultLayout from 'components/layouts/DefaultLayout' import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import { DocsButton } from 'components/ui/DocsButton' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { PgRole, useDatabaseRolesQuery } from 'data/database-roles/database-roles-query' import { useColumnPrivilegesQuery } from 'data/privileges/column-privileges-query' import { useTablePrivilegesQuery } from 'data/privileges/table-privileges-query' @@ -34,6 +33,7 @@ import { useIsProtectedSchema } from 'hooks/useProtectedSchemas' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const EDITABLE_ROLES = ['authenticated', 'anon', 'service_role'] diff --git a/apps/studio/pages/project/[ref]/database/tables/[id].tsx b/apps/studio/pages/project/[ref]/database/tables/[id].tsx index ecb96d569d..3401092bac 100644 --- a/apps/studio/pages/project/[ref]/database/tables/[id].tsx +++ b/apps/studio/pages/project/[ref]/database/tables/[id].tsx @@ -14,7 +14,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { useTableEditorStateSnapshot } from 'state/table-editor' import { TableEditorTableStateContextProvider } from 'state/table-editor-table' import type { NextPageWithLayout } from 'types' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' +import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' const DatabaseTables: NextPageWithLayout = () => { const snap = useTableEditorStateSnapshot() diff --git a/apps/studio/pages/project/[ref]/functions/index.tsx b/apps/studio/pages/project/[ref]/functions/index.tsx index 5ecaa0fbec..12b93f1d7f 100644 --- a/apps/studio/pages/project/[ref]/functions/index.tsx +++ b/apps/studio/pages/project/[ref]/functions/index.tsx @@ -20,7 +20,6 @@ import DefaultLayout from 'components/layouts/DefaultLayout' import EdgeFunctionsLayout from 'components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout' import AlertError from 'components/ui/AlertError' import { DocsButton } from 'components/ui/DocsButton' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query' import { DOCS_URL, IS_PLATFORM } from 'lib/constants' import type { NextPageWithLayout } from 'types' @@ -36,6 +35,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const EdgeFunctionsPage: NextPageWithLayout = () => { const { ref } = useParams() diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx index e8ce35c739..66b2a04684 100644 --- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx +++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx @@ -6,7 +6,6 @@ import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integra import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations' import { DefaultLayout } from 'components/layouts/DefaultLayout' import IntegrationsLayout from 'components/layouts/Integrations/layout' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import type { NextPageWithLayout } from 'types' import { Admonition } from 'ui-patterns' import { PageContainer } from 'ui-patterns/PageContainer' @@ -18,6 +17,7 @@ import { PageHeaderTitle, } from 'ui-patterns/PageHeader' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const IntegrationPage: NextPageWithLayout = () => { const router = useRouter() diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx index 2d9648034a..4577175c61 100644 --- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx +++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx @@ -7,7 +7,6 @@ import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integra import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations' import { DefaultLayout } from 'components/layouts/DefaultLayout' import IntegrationsLayout from 'components/layouts/Integrations/layout' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from 'types' @@ -34,6 +33,7 @@ import { PageSection, PageSectionContent, } from 'ui-patterns' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' type NavigationItem = { label: string; href: string; active?: boolean } diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx index 7fd08777fd..b310792e5b 100644 --- a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx +++ b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx @@ -4,10 +4,10 @@ import { useEffect } from 'react' import { useParams } from 'common' import { DefaultLayout } from 'components/layouts/DefaultLayout' import IntegrationsLayout from 'components/layouts/Integrations/layout' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import type { NextPageWithLayout } from 'types' import { PageContainer } from 'ui-patterns/PageContainer' import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const IntegrationPage: NextPageWithLayout = () => { const router = useRouter() diff --git a/apps/studio/pages/project/[ref]/settings/jwt/index.tsx b/apps/studio/pages/project/[ref]/settings/jwt/index.tsx index 1013828e9e..3b4ea47b0c 100644 --- a/apps/studio/pages/project/[ref]/settings/jwt/index.tsx +++ b/apps/studio/pages/project/[ref]/settings/jwt/index.tsx @@ -5,9 +5,9 @@ import DefaultLayout from 'components/layouts/DefaultLayout' import JWTKeysLayout from 'components/layouts/JWTKeys/JWTKeysLayout' import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout' import NoPermission from 'components/ui/NoPermission' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' +import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' const JWTSigningKeysPage: NextPageWithLayout = () => { const { can: canReadAPIKeys, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( diff --git a/apps/studio/styles/storage.scss b/apps/studio/styles/storage.scss index 633b4f2f9d..d6368c40fa 100644 --- a/apps/studio/styles/storage.scss +++ b/apps/studio/styles/storage.scss @@ -48,37 +48,6 @@ button[aria-haspopup='menu']:focus-visible { } } -.shimmering-loader { - animation: shimmer 2s infinite linear; - background: linear-gradient( - to right, - hsl(var(--border-default)) 4%, - hsl(var(--background-surface-200)) 25%, - hsl(var(--border-default)) 36% - ); - background-size: 1000px 100%; -} - -.dark .shimmering-loader { - animation: shimmer 2s infinite linear; - background: linear-gradient( - to right, - hsl(var(--border-default)) 4%, - hsl(var(--border-control)) 25%, - hsl(var(--border-default)) 36% - ); - background-size: 1000px 100%; -} - -@keyframes shimmer { - 0% { - background-position: -1000px 0; - } - 100% { - background-position: 1000px 0; - } -} - .sql-editor-container { @apply p-0; } diff --git a/packages/ui-patterns/index.tsx b/packages/ui-patterns/index.tsx index 2b253af796..1bec804ac3 100644 --- a/packages/ui-patterns/index.tsx +++ b/packages/ui-patterns/index.tsx @@ -1,6 +1,8 @@ /** - * The components are listed here so that VsCode can find out about them and list them as import suggestions. Don't - * import directly from here. + * The components are listed here so that VsCode can find out about them and list them as import suggestions. + * + * DO NOT import directly from here. + * DO NOT add new components to this file. */ export * from './src/admonition' export * from './src/AssistantChat/AssistantChatForm' @@ -17,8 +19,8 @@ export * from './src/PageContainer' export * from './src/PageHeader' export * from './src/PageSection' export * from './src/PopupFrame' +export * from './src/PromoToast' +export * from './src/Row' export * from './src/ShimmeringLoader' export * from './src/TimestampInfo' export * from './src/Toc' -export * from './src/PromoToast' -export * from './src/Row' diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json index e55f201de6..06fb110b8b 100644 --- a/packages/ui-patterns/package.json +++ b/packages/ui-patterns/package.json @@ -50,6 +50,18 @@ "import": "./src/Banners/index.ts", "types": "./src/Banners/index.ts" }, + "./Chart/charts/chart-bar": { + "import": "./src/Chart/charts/chart-bar.tsx", + "types": "./src/Chart/charts/chart-bar.tsx" + }, + "./Chart/charts/chart-line": { + "import": "./src/Chart/charts/chart-line.tsx", + "types": "./src/Chart/charts/chart-line.tsx" + }, + "./Chart": { + "import": "./src/Chart/index.tsx", + "types": "./src/Chart/index.tsx" + }, "./CommandMenu/api/Badges": { "import": "./src/CommandMenu/api/Badges.tsx", "types": "./src/CommandMenu/api/Badges.tsx" @@ -286,6 +298,10 @@ "import": "./src/Dialogs/TextConfirmModal.tsx", "types": "./src/Dialogs/TextConfirmModal.tsx" }, + "./EmptyStatePresentational": { + "import": "./src/EmptyStatePresentational/index.tsx", + "types": "./src/EmptyStatePresentational/index.tsx" + }, "./ExpandableVideo": { "import": "./src/ExpandableVideo/index.tsx", "types": "./src/ExpandableVideo/index.tsx" @@ -402,6 +418,10 @@ "import": "./src/McpUrlBuilder/types.ts", "types": "./src/McpUrlBuilder/types.ts" }, + "./McpUrlBuilder/utils/createMcpCopyHandler": { + "import": "./src/McpUrlBuilder/utils/createMcpCopyHandler.ts", + "types": "./src/McpUrlBuilder/utils/createMcpCopyHandler.ts" + }, "./McpUrlBuilder/utils/getMcpButtonData": { "import": "./src/McpUrlBuilder/utils/getMcpButtonData.ts", "types": "./src/McpUrlBuilder/utils/getMcpButtonData.ts" @@ -410,6 +430,10 @@ "import": "./src/McpUrlBuilder/utils/getMcpUrl.ts", "types": "./src/McpUrlBuilder/utils/getMcpUrl.ts" }, + "./MetricCard": { + "import": "./src/MetricCard/index.tsx", + "types": "./src/MetricCard/index.tsx" + }, "./MobileSheetNav/MobileSheetNav": { "import": "./src/MobileSheetNav/MobileSheetNav.tsx", "types": "./src/MobileSheetNav/MobileSheetNav.tsx" @@ -462,6 +486,10 @@ "import": "./src/PromoToast/index.ts", "types": "./src/PromoToast/index.ts" }, + "./PromoToast/styles.css": { + "import": "./src/PromoToast/styles.css", + "types": "./src/PromoToast/styles.css" + }, "./Row/Row.utils": { "import": "./src/Row/Row.utils.ts", "types": "./src/Row/Row.utils.ts" @@ -470,6 +498,10 @@ "import": "./src/Row/index.tsx", "types": "./src/Row/index.tsx" }, + "./ShimmeringLoader/index.css": { + "import": "./src/ShimmeringLoader/index.css", + "types": "./src/ShimmeringLoader/index.css" + }, "./ShimmeringLoader": { "import": "./src/ShimmeringLoader/index.tsx", "types": "./src/ShimmeringLoader/index.tsx" @@ -570,6 +602,10 @@ "import": "./src/form/Layout/FormLayout.tsx", "types": "./src/form/Layout/FormLayout.tsx" }, + "./form/Layout/InputIconContainer.module.css": { + "import": "./src/form/Layout/InputIconContainer.module.css", + "types": "./src/form/Layout/InputIconContainer.module.css" + }, "./form/Layout/InputIconContainer": { "import": "./src/form/Layout/InputIconContainer.tsx", "types": "./src/form/Layout/InputIconContainer.tsx" @@ -597,14 +633,6 @@ "./types/assets.d": { "import": "./src/types/assets.d.ts", "types": "./src/types/assets.d.ts" - }, - "./MetricCard": { - "import": "./src/MetricCard/index.tsx", - "types": "./src/MetricCard/index.tsx" - }, - "./Chart": { - "import": "./src/Chart/index.tsx", - "types": "./src/Chart/index.tsx" } }, "dependencies": { @@ -679,4 +707,4 @@ "peerDependencies": { "next": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/ui-patterns/scripts/update-exports.ts b/packages/ui-patterns/scripts/update-exports.ts index 88111ea4c3..0ce204860f 100644 --- a/packages/ui-patterns/scripts/update-exports.ts +++ b/packages/ui-patterns/scripts/update-exports.ts @@ -19,7 +19,7 @@ function getAllSourceFiles(dir: string): ExportMap { if (entry.isDirectory()) { Object.assign(exportsMap, getAllSourceFiles(fullPath)) - } else if (entry.isFile() && /\.(ts|tsx)$/.test(entry.name)) { + } else if (entry.isFile() && /\.(ts|tsx|css)$/.test(entry.name)) { const relativePath = path.relative(SRC_DIR, fullPath) const noExtension = relativePath.replace(/\.(ts|tsx)$/, '') const segments = noExtension.split(path.sep) diff --git a/packages/ui-patterns/src/InnerSideMenu/index.tsx b/packages/ui-patterns/src/InnerSideMenu/index.tsx index 14bc602ed6..ca609fc2bb 100644 --- a/packages/ui-patterns/src/InnerSideMenu/index.tsx +++ b/packages/ui-patterns/src/InnerSideMenu/index.tsx @@ -18,7 +18,7 @@ import { TreeViewItemVariant, cn, } from 'ui' -import ShimmeringLoader from '../ShimmeringLoader' +import { ShimmeringLoader } from '../ShimmeringLoader' const InnerSideBarTitle = forwardRef>( (props, ref) => { diff --git a/packages/ui-patterns/src/ShimmeringLoader/index.css b/packages/ui-patterns/src/ShimmeringLoader/index.css new file mode 100644 index 0000000000..e5620e6bea --- /dev/null +++ b/packages/ui-patterns/src/ShimmeringLoader/index.css @@ -0,0 +1,31 @@ +/* Loaders */ +.shimmering-loader { + animation: shimmer 2s infinite linear; + background: linear-gradient( + to right, + hsl(var(--border-default)) 4%, + hsl(var(--background-surface-200)) 25%, + hsl(var(--border-default)) 36% + ); + background-size: 1000px 100%; +} + +.dark .shimmering-loader { + animation: shimmer 2s infinite linear; + background: linear-gradient( + to right, + hsl(var(--border-default)) 4%, + hsl(var(--border-control)) 25%, + hsl(var(--border-default)) 36% + ); + background-size: 1000px 100%; +} + +@keyframes shimmer { + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } +}