Fix loading state padding

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx

@@ -51,7 +51,13 @@ export const DatabaseConnectionString = () => {
 
   const [selectedTab, setSelectedTab] = useState<ConnectionType>('uri')
 
-  const { data: poolingInfo, isSuccess: isSuccessPoolingInfo } = usePoolingConfigurationQuery({
+  const {
+    data: poolingInfo,
+    error: poolingInfoError,
+    isLoading: isLoadingPoolingInfo,
+    isError: isErrorPoolingInfo,
+    isSuccess: isSuccessPoolingInfo,
+  } = usePoolingConfigurationQuery({
     projectRef,
   })
   const poolingConfiguration = poolingInfo?.find((x) => x.identifier === state.selectedDatabaseId)
@@ -64,6 +70,11 @@ export const DatabaseConnectionString = () => {
     isSuccess: isSuccessReadReplicas,
   } = useReadReplicasQuery({ projectRef })
 
+  const error = poolingInfoError || readReplicasError
+  const isLoading = isLoadingPoolingInfo || isLoadingReadReplicas
+  const isError = isErrorPoolingInfo || isErrorReadReplicas
+  const isSuccess = isSuccessPoolingInfo && isSuccessReadReplicas
+
   const selectedDatabase = (databases ?? []).find(
     (db) => db.identifier === state.selectedDatabaseId
   )
@@ -182,12 +193,19 @@ export const DatabaseConnectionString = () => {
         <DatabaseSelector buttonProps={{ size: 'small' }} />
       </div>
 
-      {isLoadingReadReplicas && <ShimmeringLoader className="h-8 w-full" />}
-      {isErrorReadReplicas && (
-        <AlertError error={readReplicasError} subject="Failed to retrieve database settings" />
+      {isLoading && (
+        <div className="p-7">
+          <ShimmeringLoader className="h-8 w-full" />
+        </div>
       )}
 
-      {isSuccessReadReplicas && (
+      {isError && (
+        <div className="p-7">
+          <AlertError error={error} subject="Failed to retrieve database settings" />
+        </div>
+      )}
+
+      {isSuccess && (
         <div className="flex flex-col divide-y divide-border">
           {/* // handle non terminal examples */}
           {hasCodeExamples && (

apps/studio/components/interfaces/Home/Connect/Connect.constants.ts

@@ -283,6 +283,7 @@ export const ORMS: ConnectionType[] = [
 ]
 
 export const CONNECTION_TYPES = [
+  { key: 'direct', label: 'Connection String', obj: [] },
   { key: 'frameworks', label: 'App Frameworks', obj: FRAMEWORKS },
   { key: 'mobiles', label: 'Mobile Frameworks', obj: MOBILES },
   { key: 'orms', label: 'ORMs', obj: ORMS },

apps/studio/components/interfaces/Home/Connect/Connect.tsx

@@ -171,10 +171,7 @@ const Connect = () => {
             defaultValue="direct"
             onValueChange={(value) => handleConnectionType(value)}
           >
-            <TabsList_Shadcn_ className={cn('flex gap-4', DIALOG_PADDING_X)}>
-              <TabsTrigger_Shadcn_ key="direct" value="direct" className="px-0">
-                Connection String
-              </TabsTrigger_Shadcn_>
+            <TabsList_Shadcn_ className={cn('flex gap-x-4', DIALOG_PADDING_X)}>
               {CONNECTION_TYPES.map((type) => (
                 <TabsTrigger_Shadcn_ key={type.key} value={type.key} className="px-0">
                   {type.label}
@@ -191,6 +188,26 @@ const Connect = () => {
                   .find((parent) => parent.key === selectedParent)
                   ?.children.find((child) => child.key === selectedChild)?.children.length || 0) > 0
 
+              if (type.key === 'direct') {
+                return (
+                  <TabsContent_Shadcn_
+                    key="direct"
+                    value="direct"
+                    className={cn('!mt-0', 'p-0', 'flex flex-col gap-6')}
+                  >
+                    <div className={DIALOG_PADDING_Y}>
+                      {connectDialogUpdate ? (
+                        <DatabaseConnectionString />
+                      ) : (
+                        <div className="px-7">
+                          <OldDatabaseConnectionString appearance="minimal" />
+                        </div>
+                      )}
+                    </div>
+                  </TabsContent_Shadcn_>
+                )
+              }
+
               return (
                 <TabsContent_Shadcn_
                   key={`content-${type.key}`}
@@ -262,19 +279,6 @@ const Connect = () => {
                 </TabsContent_Shadcn_>
               )
             })}
-            <TabsContent_Shadcn_
-              key="direct"
-              value="direct"
-              className={cn('!mt-0', 'p-0', 'flex flex-col gap-6', DIALOG_PADDING_Y)}
-            >
-              {connectDialogUpdate ? (
-                <DatabaseConnectionString />
-              ) : (
-                <div className="px-7">
-                  <OldDatabaseConnectionString appearance="minimal" />
-                </div>
-              )}
-            </TabsContent_Shadcn_>
           </Tabs_Shadcn_>
         </DialogContent>
       </Dialog>

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx

@@ -56,6 +56,9 @@ interface DatabaseConnectionStringProps {
   appearance: 'default' | 'minimal'
 }
 
+/**
+ * @deprecated Will be removed once `connectDialogUpdate` flag is persisted
+ */
 export const DatabaseConnectionString = ({ appearance }: DatabaseConnectionStringProps) => {
   const project = useSelectedProject()
   const { ref: projectRef, connectionString } = useParams()

apps/studio/components/ui/DatabaseSelector.tsx

@@ -63,7 +63,7 @@ const DatabaseSelector = ({
   return (
     <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
       <PopoverTrigger_Shadcn_ asChild>
-        <div className="flex items-center cursor-pointer">
+        <div className="flex cursor-pointer">
           <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
             Source
           </span>