Feature/yh 2059

src/entities/featureFlag/index.ts

@@ -15,5 +15,6 @@ export { featureFlagHandlers } from './api/__mocks__';
 export { featureFlagsMock } from './api/__mocks__';
 export { FeatureFlagForm } from './ui/FeatureFlagForm/FeatureFlagForm';
 export { clientTypes } from './model/constants/featureFlags';
+export { featureFlagsMock } from './api/__mocks__/data/featureFlagsMock';
 export { featureFlagReducer } from './model/slices/featureFlagSlice';
 export type { FeatureFlagState } from './model/slices/featureFlagSlice';

src/entities/referralLink/index.ts

@@ -12,10 +12,15 @@ export type {
 export type { ReferralLinksFilterParams, ReferralLinksFilterOrderBy } from './model/types/filters';
 
 export { ReferralLinkCard } from './ui/ReferralLinkCard/ReferralLinkCard';
+export { ReferralLinkCardSkeleton } from './ui/ReferralLinkCard/ReferralLinkCard.skeleton';
 export { ReferralLinkSum } from './ui/ReferralLinkSum/ReferralLinkSum';
+export { ReferralLinkSumSkeleton } from './ui/ReferralLinkSum/ReferralLinkSum.skeleton';
 export { ReferralLinkCount } from './ui/ReferralLinkCount/ReferralLinkCount';
+export { ReferralLinkCountSkeleton } from './ui/ReferralLinkCount/ReferralLinkCount.skeleton';
 export { ReferralLinkDate } from './ui/ReferralLinkDate/ReferralLinkDate';
+export { ReferralLinkDateSkeleton } from './ui/ReferralLinkDate/ReferralLinkDate.skeleton';
 export { ReferralLinkOwner } from './ui/ReferralLinkOwner/ReferralLinkOwner';
+export { ReferralLinkOwnerSkeleton } from './ui/ReferralLinkOwner/ReferralLinkOwner.skeleton';
 export { ReferralLinkForm } from './ui/ReferralLinkForm/ReferralLinkForm';
 
 export { referralLinksHandlers } from './api/__mocks__';

src/entities/referralLink/ui/ReferralLinkCard/ReferralLinkCard.skeleton.tsx

@@ -0,0 +1,16 @@
+import { CardSkeleton } from '@/shared/ui/Card';
+import { Flex } from '@/shared/ui/Flex';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+import styles from './ReferralLinkCard.module.css';
+
+export const ReferralLinkCardSkeleton = () => {
+	return (
+		<CardSkeleton className={styles.card} withOutsideShadow>
+			<Flex direction="column" gap="14">
+				<TextSkeleton width={250} variant="body5-accent" />
+				<TextSkeleton width={300} variant="body3-accent" />
+			</Flex>
+		</CardSkeleton>
+	);
+};

src/entities/referralLink/ui/ReferralLinkCount/ReferralLinkCount.skeleton.tsx

@@ -0,0 +1,12 @@
+import { ChipSkeleton } from '@/shared/ui/Chip';
+import { Flex } from '@/shared/ui/Flex';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+export const ReferralLinkCountSkeleton = () => {
+	return (
+		<Flex direction="column" gap="16">
+			<TextSkeleton width={60} variant="body3" />
+			<ChipSkeleton label="..." withText={10} />
+		</Flex>
+	);
+};

src/entities/referralLink/ui/ReferralLinkDate/ReferralLinkDate.skeleton.tsx

@@ -0,0 +1,12 @@
+import { ChipSkeleton } from '@/shared/ui/Chip';
+import { Flex } from '@/shared/ui/Flex';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+export const ReferralLinkDateSkeleton = () => {
+	return (
+		<Flex direction="column" gap="16">
+			<TextSkeleton width={60} variant="body3" />
+			<ChipSkeleton label="..." withText={110} />
+		</Flex>
+	);
+};

src/entities/referralLink/ui/ReferralLinkOwner/ReferralLinkOwner.skeleton.tsx

@@ -0,0 +1,11 @@
+import { Flex } from '@/shared/ui/Flex';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+export const ReferralLinkOwnerSkeleton = () => {
+	return (
+		<Flex gap="8" align="start">
+			<TextSkeleton width={70} variant="body2-accent" />
+			<TextSkeleton width={15} variant="body2-accent" />
+		</Flex>
+	);
+};

src/entities/referralLink/ui/ReferralLinkSum/ReferralLinkSum.skeleton.tsx

@@ -0,0 +1,12 @@
+import { ChipSkeleton } from '@/shared/ui/Chip';
+import { Flex } from '@/shared/ui/Flex';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+export const ReferralLinkSumSkeleton = () => {
+	return (
+		<Flex direction="column" gap="16">
+			<TextSkeleton width={60} variant="body3" />
+			<ChipSkeleton label="..." withText={20} />
+		</Flex>
+	);
+};

src/entities/user/index.ts

@@ -34,6 +34,7 @@ export type {
 	GetUsersRatingResponse,
 	GetUsersRatingStatsResponse,
 } from './model/types/usersRating';
+export { usersRatingHandlers, userRolesMock } from './__mocks__';
 
 export { usersRatingHandlers, userHandlers, userRolesMock } from './__mocks__';
 export { UserRolesListField } from './ui/UserRolesListField/UserRolesListField';

src/features/referralLinks/deleteReferralLink/index.ts

@@ -1,2 +1,4 @@
 export { DeleteReferralLinkButton } from './ui/DeleteReferralLinkButton/DeleteReferralLinkButton';
+export { DeleteReferralLinkModal } from './ui/DeleteReferralLinkModal/DeleteReferralLinkModal';
+export { DeleteReferralLinkButtonSkeleton } from './ui/DeleteReferralLinkButton/DeleteReferralLinkButton.skeleton';
 export { referralLinkDeleteHandlers } from './api/__mocks__/index';

src/features/referralLinks/deleteReferralLink/ui/DeleteReferralLinkButton/DeleteReferralLinkButton.skeleton.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from '@/shared/ui/Skeleton';
+
+export const DeleteReferralLinkButtonSkeleton = () => {
+	return <Skeleton width={127} height={40} borderRadius="12px" />;
+};

src/pages/admin/referralLink/ReferalLinkDetail/ui/ReferralLinkDetailPage/ReferralLinkDetailPage.tsx

@@ -5,6 +5,7 @@ import { useGetReferralLinkByIdQuery } from '@/entities/referralLink';
 import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper';
 
 import { ReferralLinkDetailPageContent } from './ReferralLinkDetailPageContent';
+import { ReferralLinkDetailPageContentSkeleton } from './ReferralLinkDetailPageContent.skeleton';
 
 const ReferralLinkDetailPage = () => {
 	const { referralLinkId = '' } = useParams<{ referralLinkId: string }>();
@@ -28,6 +29,7 @@ const ReferralLinkDetailPage = () => {
 	return (
 		<PageWrapper
 			isLoading={isLoading}
+			skeleton={<ReferralLinkDetailPageContentSkeleton />}
 			hasError={isError}
 			hasData={hasData}
 			roles={['admin']}

src/pages/admin/referralLink/ReferalLinkDetail/ui/ReferralLinkDetailPage/ReferralLinkDetailPageContent.skeleton.tsx

@@ -0,0 +1,24 @@
+import { BackHeaderSkeleton } from '@/shared/ui/BackHeader';
+import { ButtonSkeleton } from '@/shared/ui/Button';
+import { Flex } from '@/shared/ui/Flex';
+
+import { ReferralLinkCardSkeleton } from '@/entities/referralLink';
+
+import { DeleteReferralLinkButtonSkeleton } from '@/features/referralLinks/deleteReferralLink';
+
+import { ReferralLinkAdditionalInfoSkeleton } from '@/widgets/referralLink/ReferralLinkAdditionalInfo';
+
+export const ReferralLinkDetailPageContentSkeleton = () => {
+	return (
+		<>
+			<BackHeaderSkeleton>
+				<DeleteReferralLinkButtonSkeleton />
+				<ButtonSkeleton width={180} />
+			</BackHeaderSkeleton>
+			<Flex gap="20" align="start">
+				<ReferralLinkCardSkeleton />
+				<ReferralLinkAdditionalInfoSkeleton />
+			</Flex>
+		</>
+	);
+};

src/widgets/referralLink/ReferralLinkAdditionalInfo/index.ts

@@ -1 +1,2 @@
 export { ReferralLinkAdditionalInfo } from './ui/ReferralLinkAdditionalInfo';
+export { ReferralLinkAdditionalInfoSkeleton } from './ui/ReferralLinkAdditionalInfo.skeleton';

src/widgets/referralLink/ReferralLinkAdditionalInfo/ui/ReferralLinkAdditionalInfo.skeleton.tsx

@@ -0,0 +1,25 @@
+import { CardSkeleton } from '@/shared/ui/Card';
+import { Flex } from '@/shared/ui/Flex';
+
+import {
+	ReferralLinkCountSkeleton,
+	ReferralLinkDateSkeleton,
+	ReferralLinkOwnerSkeleton,
+	ReferralLinkSumSkeleton,
+} from '@/entities/referralLink';
+
+import styles from './ReferralLinkAdditionalInfo.module.css';
+
+export const ReferralLinkAdditionalInfoSkeleton = () => {
+	return (
+		<CardSkeleton className={styles.card} withOutsideShadow>
+			<Flex direction="column" gap="24">
+				<ReferralLinkSumSkeleton />
+				<ReferralLinkCountSkeleton />
+				<ReferralLinkDateSkeleton />
+				<ReferralLinkDateSkeleton />
+				<ReferralLinkOwnerSkeleton />
+			</Flex>
+		</CardSkeleton>
+	);
+};