feat(ChangelogDialog): loading state

src/components/ChangelogDialog/ChangelogDialog.scss

@@ -30,4 +30,13 @@ $maxItemsHeight: 70vh;
         color: var(--g-color-text-secondary);
         text-align: center;
     }
+
+    &__loading {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        height: 70vh;
+        width: 100%;
+    }
 }

src/components/ChangelogDialog/ChangelogDialog.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
 import type {DialogProps} from '@gravity-ui/uikit';
-import {Dialog, Icon, Link} from '@gravity-ui/uikit';
+import {Dialog, Icon, Link, Loader} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
 
+import {ErrorContainer} from './components/ErrorContainer/ErrorContainer';
 import {Item} from './components/Item/Item';
 import i18n from './i18n';
 import type {ChangelogItem} from './types';
@@ -24,6 +25,9 @@ export interface ChangelogDialogProps {
     onClose: DialogProps['onClose'];
     onLinkClick?: (link: string) => void;
     onStoryClick?: (storyId: string) => void;
+    onRetryClick?: () => void;
+    loading?: boolean;
+    error?: boolean | {title: string; description: string};
 }
 
 let nextId = 1;
@@ -41,6 +45,9 @@ export function ChangelogDialog({
     onClose,
     onStoryClick,
     onLinkClick,
+    onRetryClick,
+    loading,
+    error,
 }: ChangelogDialogProps) {
     const idRef = React.useRef<number>();
     idRef.current = idRef.current || getNextId();
@@ -67,19 +74,27 @@ export function ChangelogDialog({
                 </Dialog.Body>
             ) : null}
             <Dialog.Body key="items" className={b('items-container')}>
-                {items.length > 0 ? (
-                    items.map((item, index) => (
-                        <Item
-                            key={index}
-                            className={b('item')}
-                            data={item}
-                            onStoryClick={onStoryClick}
-                            onLinkClick={onLinkClick}
-                        />
-                    ))
-                ) : (
-                    <div className={b('empty-placeholder')}>{i18n('label_empty')}</div>
+                {loading && (
+                    <div className={b('loading')}>
+                        <Loader size={'m'} />
+                    </div>
                 )}
+                {error && !loading && <ErrorContainer error={error} onRetryClick={onRetryClick} />}
+                {!error &&
+                    !loading &&
+                    (items.length > 0 ? (
+                        items.map((item, index) => (
+                            <Item
+                                key={index}
+                                className={b('item')}
+                                data={item}
+                                onStoryClick={onStoryClick}
+                                onLinkClick={onLinkClick}
+                            />
+                        ))
+                    ) : (
+                        <div className={b('empty-placeholder')}>{i18n('label_empty')}</div>
+                    ))}
             </Dialog.Body>
         </Dialog>
     );

src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx

@@ -108,7 +108,6 @@ const DefaultTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogPr
 };
 
 export const Default = DefaultTemplate.bind({});
-
 Default.args = {
     open: false,
     items,
@@ -121,4 +120,21 @@ Default.args = {
     onClose: () => {
         console.log('close');
     },
+    onRetryClick: () => {
+        console.log('retry');
+    },
+};
+
+export const Loading = DefaultTemplate.bind({});
+Loading.args = {
+    ...Default.args,
+    open: true,
+    loading: true,
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+    ...Default.args,
+    open: true,
+    error: true,
 };

src/components/ChangelogDialog/components/ErrorContainer/ErrorContainer.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {Alert} from '@gravity-ui/uikit';
+
+import i18n from '../../i18n';
+
+interface ErrorContainerProps {
+    onRetryClick?: () => void;
+    error?: boolean | {title?: string; description?: string};
+}
+
+export function ErrorContainer({onRetryClick, error}: ErrorContainerProps) {
+    const {title, description} = React.useMemo(() => {
+        return error && typeof error === 'object' ? error : {};
+    }, [error]);
+
+    return (
+        <Alert
+            title={title || i18n('label_error-title')}
+            message={description}
+            theme={'danger'}
+            actions={
+                onRetryClick && [
+                    {
+                        text: i18n('button_retry'),
+                        handler: onRetryClick,
+                    },
+                ]
+            }
+        />
+    );
+}

src/components/ChangelogDialog/i18n/en.json

@@ -4,5 +4,7 @@
   "label_new": "New",
   "button_view_story": "View story",
   "label_empty": "No data",
-  "action_read-more": "Read more"
+  "action_read-more": "Read more",
+  "label_error-title": "Unable load changelog",
+  "button_retry": "Retry"
 }

src/components/ChangelogDialog/i18n/ru.json

@@ -4,5 +4,7 @@
   "label_new": "New",
   "button_view_story": "Посмотреть сториз",
   "label_empty": "Нет данных",
-  "action_read-more": "Читать далее"
+  "action_read-more": "Читать далее",
+  "label_error-title": "Не удалось загрузить список изменений",
+  "button_retry": "Повторить"
 }

src/components/ChangelogDialog/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface ImageData {
     src: string;
     alt?: string;
@@ -9,7 +11,7 @@ export interface ChangelogItem {
     isNew?: boolean;
     title: string;
     image?: ImageData;
-    description: string;
+    description: React.ReactNode;
     storyId?: string;
     link?: string;
 }