fix(review): propagate parent loading to attribution section

Address review comments from cursor and copilot:

- attribution-section: when a parent supplies attributionOverride, the
  child no longer flips to the empty state while the parent request is in
  flight. Add a loadingOverride input; in override mode the skeleton is
  driven by the parent's loading state so stale/null overrides render the
  skeleton, not 'No attribution data available'.
- overview-tab: pass loading() into the section as loadingOverride.
- overview-tab: distinguish a genuine flat 0.0% Web Sessions MoM from a
  no-comparison-window 0 using weeklyTrend length (>= 8 weeks), so a real
  flat month shows its delta instead of being suppressed.

LFXV2-2023

Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

Author: mrautela365

apps/lfx-one/src/app/modules/dashboards/marketing-impact/components/attribution-section/attribution-section.component.ts

@@ -48,6 +48,10 @@ export class AttributionSectionComponent {
   // Overview tab, which also renders this section), it passes it in so we reuse
   // it instead of issuing a duplicate request. `undefined` means "self-fetch".
   public readonly attributionOverride = input<MarketingAttributionResponse | null | undefined>(undefined);
+  // When using a parent override, the parent also passes its in-flight state so
+  // we show the skeleton (not the empty state) while the parent request runs and
+  // its override is still the initial/previous-period `null`.
+  public readonly loadingOverride = input<boolean>(false);
 
   // === Forms ===
   protected readonly modelForm = this.fb.nonNullable.group({
@@ -57,14 +61,18 @@ export class AttributionSectionComponent {
   protected readonly modelOptions: AttributionModelOption[] = ATTRIBUTION_MODEL_OPTIONS;
 
   // === WritableSignals ===
-  protected readonly loading = signal(false);
+  // Tracks the component's own fetch; the template reads `loading` (below), which
+  // also folds in the parent's loadingOverride when running in override mode.
+  private readonly selfLoading = signal(false);
 
   // === Computed Signals ===
   protected readonly attributionData: Signal<MarketingAttributionResponse | null> = this.initAttributionData();
   protected readonly selectedModel: Signal<AttributionModel> = this.initSelectedModel();
   protected readonly channelRows: Signal<AttributionChannelRow[]> = this.initChannelRows();
   protected readonly totalRevenue: Signal<string> = this.initTotalRevenue();
   protected readonly hasData = computed(() => this.channelRows().length > 0);
+  // In override mode, defer to the parent's in-flight state; otherwise use our own.
+  protected readonly loading = computed(() => (this.attributionOverride() !== undefined ? this.loadingOverride() : this.selfLoading()));
 
   // === Protected Methods ===
   /** Tooltip text describing what a consolidated channel groups; empty when no definition exists (no tooltip shown). */
@@ -82,20 +90,21 @@ export class AttributionSectionComponent {
     return toSignal(
       combineLatest([override$, slug$, focus$, period$]).pipe(
         switchMap(([override, slug, focus, period]) => {
-          // A parent-supplied response short-circuits our own fetch (no duplicate query).
+          // A parent-supplied response short-circuits our own fetch (no duplicate
+          // query). Loading is driven by the parent's loadingOverride in this mode.
           if (override !== undefined) {
-            this.loading.set(false);
+            this.selfLoading.set(false);
             return of(override);
           }
           if (!slug) {
-            this.loading.set(false);
+            this.selfLoading.set(false);
             return of(null);
           }
-          this.loading.set(true);
+          this.selfLoading.set(true);
           const classification = FOCUS_TO_CLASSIFICATION[focus];
           return this.analyticsService.getMarketingAttribution(slug, classification, period || undefined).pipe(
             catchError(() => of(null)),
-            finalize(() => this.loading.set(false))
+            finalize(() => this.selfLoading.set(false))
           );
         })
       ),

apps/lfx-one/src/app/modules/dashboards/marketing-impact/components/overview-tab/overview-tab.component.html

@@ -48,5 +48,6 @@ <h3 class="text-base font-semibold text-gray-900">{{ summaryTitle() }}</h3>
     [foundationName]="foundationName()"
     [focusProgram]="focusProgram()"
     [attributionOverride]="overviewKpiData().attribution"
+    [loadingOverride]="loading()"
     data-testid="overview-tab-attribution-section" />
 }

apps/lfx-one/src/app/modules/dashboards/marketing-impact/components/overview-tab/overview-tab.component.ts

@@ -132,12 +132,14 @@ export class OverviewTabComponent {
 
       if (data.brandReach) {
         const br = data.brandReach;
-        // sessionMomChangePct defaults to 0 when there is no valid prior window
-        // to compare against (fewer than 8 weeks of trend, or an empty prior
-        // period), so a bare 0 is indistinguishable from "no comparison". Treat
-        // 0 as "nothing to report" and suppress the delta rather than show a
-        // misleading "0.0% MoM".
-        const momPct = br.sessionMomChangePct !== 0 ? br.sessionMomChangePct : null;
+        // sessionMomChangePct is 0 both for a genuine flat month AND when there is
+        // no valid prior window (the server needs recent-4 vs prior-4 weeks). Use
+        // the trend length to tell them apart: with a full comparison window (>= 8
+        // weeks) a 0 is a real "0.0% MoM"; without one, a 0 means "no comparison"
+        // and the delta is suppressed.
+        const hasComparisonWindow = (br.weeklyTrend?.length ?? 0) >= 8;
+        const noComparison = !hasComparisonWindow && br.sessionMomChangePct === 0;
+        const momPct = noComparison ? null : br.sessionMomChangePct;
         cards.push({
           id: 'web-sessions',
           label: 'Total Web Sessions',