fix(perf): lazy load super admin dashboard stats (#15147)

The super admin landing page runs all its stat queries synchronously
before rendering anything. On large installs the exact `COUNT(*)` on
conversations and the 30-day chart group-by scan the whole table and
exceed the request timeout, so the first page load fails and the console
is unreachable.

app/controllers/super_admin/dashboard_controller.rb

@@ -2,10 +2,33 @@ class SuperAdmin::DashboardController < SuperAdmin::ApplicationController
   include ActionView::Helpers::NumberHelper
 
   def index
-    @data = Conversation.unscoped.group_by_day(:created_at, range: 30.days.ago..2.seconds.ago).count.to_a
-    @accounts_count = number_with_delimiter(Account.count)
-    @users_count = number_with_delimiter(User.count)
-    @inboxes_count = number_with_delimiter(Inbox.count)
-    @conversations_count = number_with_delimiter(Conversation.count)
+    respond_to do |format|
+      format.html
+      format.json { render json: dashboard_stats }
+    end
+  end
+
+  private
+
+  def dashboard_stats
+    Rails.cache.fetch('super_admin:dashboard_stats', expires_in: 30.minutes) do
+      {
+        chartData: Conversation.unscoped.group_by_day(:created_at, range: 30.days.ago..2.seconds.ago).count.to_a,
+        accountsCount: number_with_delimiter(Account.count),
+        usersCount: number_with_delimiter(User.count),
+        inboxesCount: number_with_delimiter(Inbox.count),
+        conversationsCount: number_with_delimiter(conversations_count_estimate)
+      }
+    end
+  end
+
+  # Exact COUNT(*) scans the whole table; the planner estimate is instant
+  # and close enough for dashboard display.
+  def conversations_count_estimate
+    estimate = ActiveRecord::Base.connection.select_value(
+      "SELECT reltuples::bigint FROM pg_class WHERE relname = 'conversations'"
+    ).to_i
+    # reltuples is -1 until the table is first vacuumed/analyzed
+    estimate.negative? ? Conversation.count : estimate
   end
 end

app/javascript/superadmin_pages/views/dashboard/Index.vue

@@ -1,13 +1,31 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import BarChart from 'shared/components/charts/BarChart.vue';
-const props = defineProps({
-  componentData: {
-    type: Object,
-    default: () => ({}),
-  },
+
+const stats = ref(null);
+const failed = ref(false);
+
+const loading = computed(() => !stats.value && !failed.value);
+
+onMounted(async () => {
+  try {
+    const response = await fetch(window.location.pathname, {
+      headers: { Accept: 'application/json' },
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    stats.value = await response.json();
+  } catch {
+    failed.value = true;
+  }
 });
 
+const metrics = computed(() => [
+  { label: 'Accounts', value: stats.value?.accountsCount },
+  { label: 'Users', value: stats.value?.usersCount },
+  { label: 'Inboxes', value: stats.value?.inboxesCount },
+  { label: 'Conversations', value: stats.value?.conversationsCount },
+]);
+
 const prepareData = sourceData => {
   var labels = [];
   var data = [];
@@ -30,11 +48,8 @@ const prepareData = sourceData => {
 };
 
 const chartData = computed(() => {
-  return prepareData(props.componentData.chartData);
+  return prepareData(stats.value?.chartData || []);
 });
-
-const { accountsCount, usersCount, inboxesCount, conversationsCount } =
-  props.componentData;
 </script>
 
 <template>
@@ -47,26 +62,25 @@ const { accountsCount, usersCount, inboxesCount, conversationsCount } =
 
     <section class="main-content__body main-content__body--flush">
       <div class="report--list">
-        <div class="report-card">
-          <div class="metric">{{ accountsCount }}</div>
-          <div>{{ 'Accounts' }}</div>
-        </div>
-        <div class="report-card">
-          <div class="metric">{{ usersCount }}</div>
-          <div>{{ 'Users' }}</div>
-        </div>
-        <div class="report-card">
-          <div class="metric">{{ inboxesCount }}</div>
-          <div>{{ 'Inboxes' }}</div>
-        </div>
-        <div class="report-card">
-          <div class="metric">{{ conversationsCount }}</div>
-          <div>{{ 'Conversations' }}</div>
+        <div v-for="item in metrics" :key="item.label" class="report-card">
+          <div class="metric">
+            <span
+              v-if="loading"
+              class="inline-block w-20 h-8 rounded bg-woot-100 animate-pulse"
+            />
+            <template v-else>{{ item.value || 'N/A' }}</template>
+          </div>
+          <div>{{ item.label }}</div>
         </div>
       </div>
     </section>
     <!-- eslint-disable vue/no-static-inline-styles -->
+    <div
+      v-if="loading"
+      class="p-8 mx-8 h-64 rounded bg-woot-100 animate-pulse"
+    />
     <BarChart
+      v-else-if="!failed"
       class="p-8 w-full"
       :collection="chartData"
       style="max-height: 500px"

app/models/conversation.rb

@@ -39,6 +39,7 @@
 #  index_conversations_on_campaign_id                 (campaign_id)
 #  index_conversations_on_contact_id                  (contact_id)
 #  index_conversations_on_contact_inbox_id            (contact_inbox_id)
+#  index_conversations_on_created_at                  (created_at)
 #  index_conversations_on_first_reply_created_at      (first_reply_created_at)
 #  index_conversations_on_id_and_account_id           (account_id,id)
 #  index_conversations_on_identifier_and_account_id   (identifier,account_id)

app/views/super_admin/dashboard/index.html.erb

@@ -2,10 +2,4 @@
   Admin Dashboard
 <% end %>
 
-<%= render_vue_component('DashboardIndex', {
-  accountsCount: @accounts_count,
-  usersCount: @users_count,
-  inboxesCount: @inboxes_count,
-  conversationsCount: @conversations_count,
-  chartData: @data
-}) %>
+<%= render_vue_component('DashboardIndex', {}) %>

db/migrate/20260724000100_add_index_to_conversations_created_at.rb

@@ -0,0 +1,7 @@
+class AddIndexToConversationsCreatedAt < ActiveRecord::Migration[7.1]
+  disable_ddl_transaction!
+
+  def change
+    add_index :conversations, :created_at, algorithm: :concurrently
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2026_07_18_000000) do
+ActiveRecord::Schema[7.1].define(version: 2026_07_24_000100) do
   # These extensions should be enabled to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -800,6 +800,7 @@ ActiveRecord::Schema[7.1].define(version: 2026_07_18_000000) do
     t.index ["campaign_id"], name: "index_conversations_on_campaign_id"
     t.index ["contact_id"], name: "index_conversations_on_contact_id"
     t.index ["contact_inbox_id"], name: "index_conversations_on_contact_inbox_id"
+    t.index ["created_at"], name: "index_conversations_on_created_at"
     t.index ["first_reply_created_at"], name: "index_conversations_on_first_reply_created_at"
     t.index ["identifier", "account_id"], name: "index_conversations_on_identifier_and_account_id"
     t.index ["inbox_id"], name: "index_conversations_on_inbox_id"

tailwind.config.js

@@ -23,6 +23,7 @@ const tailwindConfig = {
   darkMode: 'class',
   content: [
     './enterprise/app/views/**/*.erb',
+    './app/javascript/superadmin_pages/**/*.vue',
     './app/javascript/widget/**/*.vue',
     './app/javascript/v3/**/*.vue',
     './app/javascript/dashboard/**/*.vue',