fix: update project skeleton when unpausing project

Author: awaseem

apps/studio/components/interfaces/ProjectHome/TopSection.Skeleton.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from 'ui'
+
+export const TopSectionSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-0 w-full items-center">
+        <div className="flex flex-col">
+          <div className="flex flex-row flex-wrap items-center gap-4 w-full">
+            <div>
+              <div className="flex items-center gap-x-2">
+                <Skeleton className="h-9 w-48" />
+                <Skeleton className="h-6 w-16" />
+              </div>
+              <Skeleton className="h-5 w-64 mt-3" />
+            </div>
+          </div>
+          <div className="mt-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-6 flex-wrap">
+              <Skeleton className="h-[72px] w-full" />
+              <Skeleton className="h-[72px] w-full" />
+              <Skeleton className="h-[72px] w-full" />
+              <Skeleton className="h-[72px] w-full" />
+            </div>
+          </div>
+        </div>
+        <div>
+          <Skeleton className="w-full h-[400px] md:h-[500px] rounded-md" />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/studio/components/interfaces/ProjectHome/TopSection.tsx

@@ -14,10 +14,11 @@ import { ReactFlowProvider } from 'reactflow'
 import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { InstanceConfiguration } from '../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration'
+import { TopSectionSkeleton } from './TopSection.Skeleton'
 
 export const TopSection = () => {
   const isOrioleDb = useIsOrioleDb()
-  const { data: project } = useSelectedProjectQuery()
+  const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery()
   const { data: organization } = useSelectedOrganizationQuery()
   const { data: parentProject } = useProjectDetailQuery({ ref: project?.parent_project_ref })
 
@@ -41,6 +42,10 @@ export const TopSection = () => {
     return <ProjectPausedState />
   }
 
+  if (isLoadingProject) {
+    return <TopSectionSkeleton />
+  }
+
   return (
     <div className="flex flex-col gap-y-4">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-0 w-full items-center">

apps/studio/data/config/project-endpoint-query.ts

@@ -34,7 +34,8 @@ export const useProjectApiUrl = (
   const protocol = settings?.app_config?.protocol ?? 'https'
   const endpoint = settings?.app_config?.endpoint
 
-  const hostEndpoint = isSuccessProjectSettings ? `${protocol}://${endpoint}` : undefined
+  const hostEndpoint =
+    isSuccessProjectSettings && endpoint ? `${protocol}://${endpoint}` : undefined
   const resolvedEndpoint = isCustomDomainsActive ? customEndpoint : hostEndpoint
   const storageEndpoint = settings?.app_config?.storage_endpoint
     ? `${IS_PLATFORM ? 'https' : protocol}://${settings?.app_config?.storage_endpoint}`