chore: remove spinner waterfall on project index page (#19357)

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

@@ -1,11 +1,13 @@
 import { useParams } from 'common'
 import { observer } from 'mobx-react-lite'
-import { IconAlertCircle, IconLoader } from 'ui'
+import { IconAlertCircle } from 'ui'
 
 import { NewProjectPanel } from 'components/interfaces/Home'
+import { ProjectUsageLoadingState } from 'components/layouts/ProjectLayout/LoadingState'
 import InformationBox from 'components/ui/InformationBox'
-import ProjectUsage from './ProjectUsage'
 import { useProjectLogRequestsCountQuery } from 'data/analytics/project-log-requests-count-query'
+import { useProjectLogStatsQuery } from 'data/analytics/project-log-stats-query'
+import ProjectUsage from './ProjectUsage'
 
 const ProjectUsageSection = observer(() => {
   const { ref: projectRef } = useParams()
@@ -15,6 +17,13 @@ const ProjectUsageSection = observer(() => {
     isLoading,
   } = useProjectLogRequestsCountQuery({ projectRef })
 
+  // wait for the stats to load before showing the usage section
+  // to eliminate multiple spinners
+  const { isLoading: isLogsStatsLoading } = useProjectLogStatsQuery({
+    projectRef,
+    interval: 'hourly',
+  })
+
   if (usageError) {
     return (
       <InformationBox
@@ -31,11 +40,8 @@ const ProjectUsageSection = observer(() => {
 
   return (
     <>
-      {isLoading ? (
-        <div className="flex w-full items-center justify-center space-x-2">
-          <IconLoader className="animate-spin" size={14} />
-          <p className="text-sm">Retrieving project usage statistics</p>
-        </div>
+      {isLoading || isLogsStatsLoading ? (
+        <ProjectUsageLoadingState />
       ) : hasProjectData ? (
         <ProjectUsage />
       ) : (

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

@@ -21,14 +21,8 @@ const LoadingState = () => {
         )}
       </div>
 
-      <div className="mx-6 space-y-4">
-        <ShimmeringLoader className="w-40 h-7" />
-        <div className="flex md:gap-4 lg:gap-8">
-          <ShimmeringLoader className="w-full h-[304px]" />
-          <ShimmeringLoader className="w-full h-[304px]" />
-          <ShimmeringLoader className="w-full h-[304px]" />
-          <ShimmeringLoader className="w-full h-[304px]" />
-        </div>
+      <div className="mx-6">
+        <ProjectUsageLoadingState />
       </div>
 
       <div className="mx-6 space-y-4">
@@ -40,3 +34,17 @@ const LoadingState = () => {
 }
 
 export default LoadingState
+
+export const ProjectUsageLoadingState = () => {
+  return (
+    <div className="space-y-4">
+      <ShimmeringLoader className="w-40 h-7" />
+      <div className="flex md:gap-4 lg:gap-8">
+        <ShimmeringLoader className="w-full h-[304px]" />
+        <ShimmeringLoader className="w-full h-[304px]" />
+        <ShimmeringLoader className="w-full h-[304px]" />
+        <ShimmeringLoader className="w-full h-[304px]" />
+      </div>
+    </div>
+  )
+}