Feat(analytics/insights): load charts individually

ee/app/assets/javascripts/insights/components/insights_chart.vue

@@ -20,11 +20,13 @@ export default {
   props: {
     loaded: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false,
     },
     type: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     title: {
       type: String,
@@ -38,7 +40,8 @@ export default {
     },
     data: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
     error: {
       type: String,
@@ -150,7 +153,7 @@ export default {
       @created="onChartCreated"
     />
   </resizable-chart-container>
-  <div v-else class="insights-chart">
+  <div v-else-if="error" class="insights-chart">
     <insights-chart-error
       :chart-name="title"
       :title="__('This chart could not be displayed')"

ee/app/assets/javascripts/insights/components/insights_page.vue

@@ -74,7 +74,7 @@ export default {
   <div class="insights-page" data-qa-selector="insights_page">
     <div v-if="hasChartsConfigured" class="js-insights-page-container">
       <h4 class="text-center">{{ pageConfig.title }}</h4>
-      <div v-if="!pageLoading" class="insights-charts" data-qa-selector="insights_charts">
+      <div class="insights-charts" data-qa-selector="insights_charts">
         <insights-chart
           v-for="({ loaded, type, description, data, error }, key, index) in chartData"
           :key="index"
@@ -86,7 +86,7 @@ export default {
           :error="error"
         />
       </div>
-      <div v-else class="insights-chart-loading text-center">
+      <div v-if="pageLoading" class="insights-chart-loading text-center p-5">
         <gl-loading-icon :inline="true" size="lg" />
       </div>
     </div>

ee/changelogs/unreleased/219742-load-each-chart-separately-on-insights-page.yml

+---
+title: 'Analytics Insights page: Load charts individually, instead of waiting for
+  all data to load before displaying the page'
+merge_request: 34290
+author:
+type: changed

ee/spec/frontend/insights/components/insights_page_spec.js

@@ -65,11 +65,21 @@ describe('Insights page component', () => {
         });
       });
 
-      it('does not display chart area', () => {
+      it('does display chart area', () => {
         return component.$nextTick(() => {
-          expect(component.$el.querySelector('.js-insights-page-container .insights-charts')).toBe(
-            null,
-          );
+          expect(
+            component.$el.querySelector('.js-insights-page-container .insights-charts'),
+          ).not.toBe(null);
+        });
+      });
+
+      it('does not display chart', () => {
+        return component.$nextTick(() => {
+          expect(
+            component.$el.querySelector(
+              '.js-insights-page-container .insights-charts .insights-chart',
+            ),
+          ).toBe(null);
         });
       });
     });