diff --git a/src/internal/context/tab-context.ts b/src/internal/context/tab-context.ts new file mode 100644 index 0000000000..dbd32961e9 --- /dev/null +++ b/src/internal/context/tab-context.ts @@ -0,0 +1,12 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { createContext, useContext } from 'react'; +export interface TabContextProps { + isInFirstTab: boolean | null; +} +export const TabContext = createContext({ + isInFirstTab: null, +}); +export const useTabContext = () => { + return useContext(TabContext); +}; diff --git a/src/internal/hooks/use-performance-marks/index.ts b/src/internal/hooks/use-performance-marks/index.ts index 4fbfce61d3..19cbba126b 100644 --- a/src/internal/hooks/use-performance-marks/index.ts +++ b/src/internal/hooks/use-performance-marks/index.ts @@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'; import { useModalContext } from '../../context/modal-context'; +import { useTabContext } from '../../context/tab-context'; import { useDOMAttribute } from '../use-dom-attribute'; import { useEffectOnUpdate } from '../use-effect-on-update'; import { useRandomId } from '../use-unique-id'; @@ -48,10 +49,11 @@ export function usePerformanceMarks( ) { const id = useRandomId(); const { isInModal } = useModalContext(); + const { isInFirstTab } = useTabContext(); const attributes = useDOMAttribute(elementRef, 'data-analytics-performance-mark', id); const evaluateComponentVisibility = useEvaluateComponentVisibility(); useEffect(() => { - if (!enabled() || !elementRef.current || isInModal) { + if (!enabled || !elementRef.current || isInModal || isInFirstTab === false) { return; } const elementVisible = @@ -64,6 +66,7 @@ export function usePerformanceMarks( } const renderedMarkName = `${name}Rendered`; + console.log('mark'); performance.mark(renderedMarkName, { detail: { source: 'awsui', @@ -75,7 +78,7 @@ export function usePerformanceMarks( }, []); useEffectOnUpdate(() => { - if (!enabled() || !elementRef.current || isInModal) { + if (!enabled || !elementRef.current || isInModal || isInFirstTab === false) { return; } const elementVisible = diff --git a/src/tabs/index.tsx b/src/tabs/index.tsx index 6970dd2def..bd9430cc48 100644 --- a/src/tabs/index.tsx +++ b/src/tabs/index.tsx @@ -7,6 +7,7 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool import InternalContainer from '../container/internal'; import { getBaseProps } from '../internal/base-component'; +import { TabContext } from '../internal/context/tab-context'; import { fireNonCancelableEvent } from '../internal/events'; import useBaseComponent from '../internal/hooks/use-base-component'; import { useControllable } from '../internal/hooks/use-controllable'; @@ -96,7 +97,17 @@ export default function Tabs({ }; const isContentShown = isTabSelected && !selectedTab.disabled; - return
{isContentShown && selectedTab.content}
; + const firstTab = firstEnabledTab(tabs); + + return ( + +
{isContentShown && selectedTab.content}
+
+ ); }; return (