Develop

src/atomics/Typography/TypographyLink.tsx

@@ -1,9 +1,14 @@
 import { forwardRef } from 'react';
 import { TypographyLinkStyles } from './styles';
 import { RdTypographyLinkProps } from './types';
+import { Skeleton } from '../../molecules';
 
 export const TypographyLink = forwardRef(
-    ({ ...antdProps }: RdTypographyLinkProps, ref: RdTypographyLinkProps['ref']) => {
+    (props: RdTypographyLinkProps, ref: RdTypographyLinkProps['ref']) => {
+        const { loading, ...antdProps } = props;
+
+        if (loading) return <Skeleton active />;
+
         return <TypographyLinkStyles ref={ref} {...antdProps} />;
     }
 );

src/atomics/Typography/TypographyParagraph.tsx

@@ -1,9 +1,14 @@
 import { forwardRef } from 'react';
 import { TypographyParagraphStyles } from './styles';
 import { RdTypographyParagraphProps } from './types';
+import { Skeleton } from '../../molecules';
 
 export const TypographyParagraph = forwardRef(
-    ({ ...antdProps }: RdTypographyParagraphProps, ref: RdTypographyParagraphProps['ref']) => {
+    (props: RdTypographyParagraphProps, ref: RdTypographyParagraphProps['ref']) => {
+        const { loading, ...antdProps } = props;
+
+        if (loading) return <Skeleton active />;
+
         return <TypographyParagraphStyles ref={ref} {...antdProps} />;
     }
 );

src/atomics/Typography/TypographyText.tsx

@@ -1,10 +1,20 @@
 import { forwardRef, useMemo } from 'react';
 import { TypographyTextStyles } from './styles';
 import { RdTypographyTextProps } from './types';
+import { Skeleton } from '../../molecules';
 
 export const TypographyText = forwardRef(
     (props: RdTypographyTextProps, ref: RdTypographyTextProps['ref']) => {
-        const { size = 'normal', editable, autoFocus = false, onChange, ...antdProps } = props;
+        const {
+            size = 'normal',
+            editable,
+            autoFocus = false,
+            loading = false,
+            onChange,
+            ...antdProps
+        } = props;
+
+        if (loading) return <Skeleton.Input active />;
 
         const editableCustom = useMemo(() => {
             if (editable && typeof editable === 'object') {

src/atomics/Typography/TypographyTitle.tsx

@@ -1,9 +1,14 @@
 import { forwardRef } from 'react';
+import { Skeleton } from '../../molecules';
 import { TypographyTitleStyles } from './styles';
 import { RdTypographyTitleProps } from './types';
 
 export const TypographyTitle = forwardRef(
-    ({ disableMargin, ...antdProps }: RdTypographyTitleProps, ref: RdTypographyTitleProps['ref']) => {
+    (props: RdTypographyTitleProps, ref: RdTypographyTitleProps['ref']) => {
+        const { disableMargin, loading, ...antdProps } = props;
+
+        if (loading) return <Skeleton.Input active />;
+
         return <TypographyTitleStyles disableMargin={disableMargin} ref={ref} {...antdProps} />;
     }
 );

src/atomics/Typography/styles.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Typography } from 'antd';
 import { getComponentOrGlobalToken } from '../../utils/token';
-import { RdTypographyTextProps, RdTypographyTitleProps } from './types';
+import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types';
 import { css } from '@emotion/react';
 import { getExcludeForwardProps } from '../../utils/styles';
 
@@ -36,4 +36,19 @@ export const TypographyTextStyles = styled(Typography.Text)<Pick<RdTypographyTex
     }}
 `;
 
-export const TypographyParagraphStyles = styled(Typography.Paragraph)``;
+export const TypographyParagraphStyles = styled(Typography.Paragraph, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdTypographyParagraphProps>(
+            ['minRows'] as (keyof RdTypographyParagraphProps)[],
+            prop
+        ),
+})<RdTypographyParagraphProps>`
+    ${({ minRows }) => {
+        return (
+            minRows &&
+            css`
+                min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) * Number(getComponentOrGlobalToken('Typography', 'fontSize')) * minRows}px;
+            `
+        );
+    }}
+`;

src/atomics/Typography/types.ts

@@ -14,10 +14,18 @@ type TypographyComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
-type TypographyPropsExtend = {};
-type TypographyLinkPropsExtend = {};
-type TypographyParagraphPropsExtend = {};
-type TypographyTextPropsExtend = {
+type TypographyBaseProps = {
+    loading?: boolean;
+};
+type TypographyPropsExtend = TypographyBaseProps & {};
+type TypographyLinkPropsExtend = TypographyBaseProps & {};
+type TypographyParagraphPropsExtend = TypographyBaseProps & {
+    /**
+     * Min rows of paragraph
+     */
+    minRows?: number;
+};
+type TypographyTextPropsExtend = TypographyBaseProps & {
     /**
      * @description The size of the text.
      * @default "normal"
@@ -34,7 +42,7 @@ type TypographyTextPropsExtend = {
 /**
  * Extended properties for customizing the Typography.Title component.
  */
-type TypographyTitlePropsExtend = {
+type TypographyTitlePropsExtend = TypographyBaseProps & {
     /**
      * If set to `true`, disables the default margin applied to the Typography.Title component.
      * @default false

src/index.tsx

@@ -15,4 +15,6 @@ export * from './atomics';
 export * from './molecules';
 export * from './organisms';
 export * from './templates';
-export * from './utils';
+export * from './utils';
+
+export * from './types'

src/molecules/Image/Image.tsx

@@ -1,6 +1,37 @@
+import { Skeleton } from '../Skeleton';
 import { ImageStyles } from './styles';
 import { RdImageComponent } from './types';
 
 export const Image: RdImageComponent = props => {
-    return <ImageStyles {...props} />;
+    const { loading = false, ...antdProps } = props;
+
+    return (
+        <>
+            {/**
+             * Note:
+             * Previously, when `loading = true`, the component only rendered the `Skeleton.Node`
+             * and skipped rendering the `ImageStyles` completely.
+             *
+             * However, in that case, the `img` element was never created, so the browser wouldn't start downloading the image,
+             * and we couldn't catch the `onLoad` event.
+             *
+             * Now, even when `loading = true`, the image is still rendered (but hidden) so that:
+             * - The browser starts loading it
+             * - The `onLoad` event can be triggered when it's ready
+             * - Once the image is fully loaded, `loading` can be set to `false`, revealing the image
+             *
+             * This helps with smoother image transitions (e.g. fade-in) and avoids a jarring pop-in effect.
+             */}
+            {loading && (
+                <Skeleton.Node
+                    active
+                    style={{
+                        width: antdProps?.width,
+                        height: antdProps?.height,
+                    }}
+                />
+            )}
+            <ImageStyles hidden={loading} {...antdProps} />
+        </>
+    );
 };

src/molecules/Image/styles.tsx

@@ -1,4 +1,18 @@
 import styled from '@emotion/styled';
 import { Image } from 'antd';
+import { getExcludeForwardProps } from '../../utils';
+import { RdImageProps } from './types';
 
-export const ImageStyles = styled(Image)``;
+export const ImageStyles = styled(Image, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdImageProps>([] as (keyof RdImageProps)[], prop),
+})<RdImageProps>`
+    ${({ hidden }) => {
+        return (
+            hidden &&
+            `
+                display: none
+            `
+        );
+    }}
+`;

src/molecules/Image/types.ts

@@ -10,11 +10,15 @@ type ImageComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
-type ImagePropsExtend = {};
+type ImagePropsExtend = {
+    // Override loading prop in antd image, use loadingType instead
+    loading?: boolean;
+    loadingType?: ImagePropsAntd['loading'];
+};
 //#endregion
 
 //#region Export types
-export type RdImageProps = ImagePropsAntd & ImagePropsExtend;
+export type RdImageProps = Omit<ImagePropsAntd, 'loading'> & ImagePropsExtend;
 export type RdImageComponentToken = ImageComponentTokenAntd & ImageComponentTokenExtend;
 //#endregion
 

src/molecules/Tag/Tag.tsx

@@ -1,10 +1,17 @@
 import { forwardRef } from 'react';
+import { Skeleton } from '../Skeleton';
 import { TagStyled } from './styles';
-import { RdTagComponent, RdTagCompoundedComponent } from './types';
 import { TagCheckable } from './TagCheckable';
+import { RdTagComponent, RdTagCompoundedComponent } from './types';
 
 export const TagInternal: RdTagComponent = forwardRef((props, ref) => {
-    return <TagStyled ref={ref} {...props} />;
+    const { loading = false, ...antdProps } = props;
+
+    if (loading) {
+        return <Skeleton.Button active />;
+    }
+
+    return <TagStyled ref={ref} {...antdProps} />;
 });
 
 export const Tag = TagInternal as RdTagCompoundedComponent;

src/molecules/Tag/types.ts

@@ -11,7 +11,9 @@ type TagComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
-type TagPropsExtend = {};
+type TagPropsExtend = {
+    loading?: boolean;
+};
 type TagCheckablePropsExtend = {};
 //#endregion
 

src/types.ts

@@ -0,0 +1,4 @@
+export interface RdBaseOption<T = unknown> {
+    label: React.ReactNode;
+    value: T;
+}