diff --git a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx index 72dd7c18f600d..ec5d491007271 100644 --- a/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx +++ b/frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx @@ -1,5 +1,7 @@ import { LemonDivider } from '@posthog/lemon-ui' import { BindLogic, useValues } from 'kea' +import { AnimationType } from 'lib/animations/animations' +import { Animation } from 'lib/components/Animation/Animation' import { useCallback, useState } from 'react' import { insightLogic } from 'scenes/insights/insightLogic' @@ -52,7 +54,7 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX. cachedResults: props.cachedResults, } - const { query, visualizationType, showEditingUI, showResultControls, sourceFeatures } = + const { query, visualizationType, showEditingUI, showResultControls, sourceFeatures, response, responseLoading } = useValues(builtDataVisualizationLogic) const setQuerySource = useCallback( @@ -61,7 +63,13 @@ export function DataTableVisualization(props: DataTableVisualizationProps): JSX. ) let component: JSX.Element | null = null - if (visualizationType === ChartDisplayType.ActionsTable) { + if (!response && responseLoading) { + return ( +
+ +
+ ) + } else if (visualizationType === ChartDisplayType.ActionsTable) { component = ( ([ key((props) => props.key), path(['queries', 'nodes', 'DataVisualization', 'dataVisualizationLogic']), connect({ - values: [teamLogic, ['currentTeamId'], insightSceneLogic, ['insightMode'], dataNodeLogic, ['response']], + values: [ + teamLogic, + ['currentTeamId'], + insightSceneLogic, + ['insightMode'], + dataNodeLogic, + ['response', 'responseLoading'], + ], actions: [dataNodeLogic, ['loadDataSuccess']], }), props({ query: {} } as DataVisualizationLogicProps),