chore: instrument time insights are marked as loading

frontend/src/lib/utils/eventUsageLogic.ts

@@ -23,6 +23,7 @@ import {
     PropertyGroupFilter,
     FilterLogicalOperator,
     PropertyFilterValue,
+    InsightShortId,
 } from '~/types'
 import type { Dayjs } from 'lib/dayjs'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
@@ -439,6 +440,10 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
             loadTime,
             error,
         }),
+        reportInsightRefreshTime: (loadingMilliseconds: number, insightShortId: InsightShortId) => ({
+            loadingMilliseconds,
+            insightShortId,
+        }),
         reportInsightOpenedFromRecentInsightList: true,
         reportRecordingOpenedFromRecentRecordingList: true,
         reportPersonOpenedFromNewlySeenPersonsList: true,
@@ -454,8 +459,18 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
         reportFailedToCreateFeatureFlagWithCohort: (code: string, detail: string) => ({ code, detail }),
         reportInviteMembersButtonClicked: true,
         reportIngestionSidebarButtonClicked: (name: string) => ({ name }),
+        reportDashboardLoadingTime: (loadingMilliseconds: number, dashboardId: number) => ({
+            loadingMilliseconds,
+            dashboardId,
+        }),
     },
     listeners: ({ values }) => ({
+        reportDashboardLoadingTime: async ({ loadingMilliseconds, dashboardId }) => {
+            posthog.capture('dashboard loading time', { loadingMilliseconds, dashboardId })
+        },
+        reportInsightRefreshTime: async ({ loadingMilliseconds, insightShortId }) => {
+            posthog.capture('insight refresh time', { loadingMilliseconds, insightShortId })
+        },
         reportEventsTablePollingReactedToPageVisibility: async ({ pageIsVisible }) => {
             posthog.capture(`events table polling ${pageIsVisible ? 'resumed' : 'paused'}`, { pageIsVisible })
         },

frontend/src/scenes/dashboard/dashboardLogic.ts

@@ -2,7 +2,7 @@ import { isBreakpoint, kea } from 'kea'
 import api from 'lib/api'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import { router } from 'kea-router'
-import { dayjs, now } from 'lib/dayjs'
+import { Dayjs, dayjs, now } from 'lib/dayjs'
 import { clearDOMTextSelection, isUserLoggedIn, toParams } from 'lib/utils'
 import { insightsModel } from '~/models/insightsModel'
 import { DashboardPrivilegeLevel, OrganizationMembershipLevel } from 'lib/constants'
@@ -44,6 +44,13 @@ export interface DashboardLogicProps {
     placement?: DashboardPlacement
 }
 
+export interface RefreshStatus {
+    loading?: boolean
+    refreshed?: boolean
+    error?: boolean
+    timer?: Dayjs | null
+}
+
 export const AUTO_REFRESH_INITIAL_INTERVAL_SECONDS = 300
 
 export const dashboardLogic = kea<dashboardLogicType>({
@@ -252,34 +259,28 @@ export const dashboardLogic = kea<dashboardLogicType>({
                 },
             },
         ],
+        loadTimer: [null as Dayjs | null, { loadDashboardItems: () => now() }],
         refreshStatus: [
-            {} as Record<
-                string,
-                {
-                    loading?: boolean
-                    refreshed?: boolean
-                    error?: boolean
-                }
-            >,
+            {} as Record<string, RefreshStatus>,
             {
                 setRefreshStatus: (state, { shortId, loading }) => ({
                     ...state,
-                    [shortId]: loading ? { loading: true } : { refreshed: true },
+                    [shortId]: loading
+                        ? { loading: true, timer: now() }
+                        : { refreshed: true, timer: state[shortId]?.timer || null },
                 }),
-                setRefreshStatuses: (_, { shortIds, loading }) =>
+                setRefreshStatuses: (state, { shortIds, loading }) =>
                     Object.fromEntries(
-                        shortIds.map((shortId) => [shortId, loading ? { loading: true } : { refreshed: true }])
-                    ) as Record<
-                        string,
-                        {
-                            loading?: boolean
-                            refreshed?: boolean
-                            error?: boolean
-                        }
-                    >,
+                        shortIds.map((shortId) => [
+                            shortId,
+                            loading
+                                ? { loading: true, timer: now() }
+                                : { refreshed: true, timer: state[shortId]?.timer || null },
+                        ])
+                    ) as Record<string, RefreshStatus>,
                 setRefreshError: (state, { shortId }) => ({
                     ...state,
-                    [shortId]: { error: true },
+                    [shortId]: { error: true, timer: state[shortId]?.timer || null },
                 }),
                 refreshAllDashboardItems: () => ({}),
             },
@@ -562,7 +563,29 @@ export const dashboardLogic = kea<dashboardLogicType>({
             }
         },
     }),
-    listeners: ({ actions, values, cache, props }) => ({
+    sharedListeners: ({ values, props }) => ({
+        reportRefreshTiming: ({ shortId }) => {
+            const refreshStatus = values.refreshStatus[shortId]
+
+            if (refreshStatus?.timer) {
+                const loadingMilliseconds = now().diff(refreshStatus.timer)
+                eventUsageLogic.actions.reportInsightRefreshTime(loadingMilliseconds, shortId)
+            }
+        },
+        reportLoadTiming: () => {
+            if (!props.id) {
+                // what even is loading?!
+                return
+            }
+            const loadingMilliseconds = now().diff(values.loadTimer)
+            eventUsageLogic.actions.reportDashboardLoadingTime(loadingMilliseconds, props.id)
+        },
+    }),
+    listeners: ({ actions, values, cache, props, sharedListeners }) => ({
+        setRefreshError: sharedListeners.reportRefreshTiming,
+        setRefreshStatuses: sharedListeners.reportRefreshTiming,
+        setRefreshStatus: sharedListeners.reportRefreshTiming,
+        loadDashboardItemsFailure: sharedListeners.reportLoadTiming,
         triggerDashboardUpdate: ({ payload }) => {
             if (values.dashboard) {
                 dashboardsModel.actions.updateDashboard({ id: values.dashboard.id, ...payload })
@@ -730,6 +753,9 @@ export const dashboardLogic = kea<dashboardLogicType>({
             }
         },
         loadDashboardItemsSuccess: () => {
+            // I didn't want any parameters but kea does :)
+            sharedListeners.reportLoadTiming(null, async () => {}, {} as { type: string; payload: any }, null)
+
             // Initial load of actual data for dashboard items after general dashboard is fetched
             if (values.lastRefreshed && values.lastRefreshed.isBefore(now().subtract(3, 'hours'))) {
                 actions.refreshAllDashboardItems()