# All files / src/transition skeletonPlaceholderUtils.ts

100% Statements 105/105
100% Branches 1/1
100% Functions 1/1
100% Lines 105/105

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    1061x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import { type CSSProperties } from "react";
    import { bem } from "../utils/bem.js";
    import { randomInt } from "../utils/randomInt.js";

    /**
     * @remarks \@since 6.0.0
     */
    export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");

    /**
     * @remarks \@since 6.0.0
     */
    export interface SkeletonPlaceholderRandomOptions {
      /**
       * The minimum `animation-delay` milliseconds allowed in the random generator.
       * This value should be: `0 <= minDelay < maxDelay`.
       *
       * The `animation-delay` will be generated by:
       * ```ts
       * const delay = randomInt({
       *   min: minDelay,
       *   max: maxDelay,
       * });
       *
       * return {
       *   animationDelay: `-${delay}ms`,
       * };
       * ```
       *
       * @defaultValue `0`
       */
      minDelay?: number;

      /**
       * @see {@link minDelay}
       * @defaultValue `400`
       */
      maxDelay?: number;

      /**
       * The minimum width percentage allowed in the random generator. This value
       * should be: `0 >= minPercentage < maxPercentage`.
       *
       * The `width` will be generated by:
       * ```ts
       * const width = randomInt({
       *   min: minPercentage,
       *   max: maxPercentage,
       * });
       *
       * return {
       *   width: `${width}%`,
       * };
       * ```
       * @defaultValue `40`
       */
      minPercentage?: number;

      /**
       * @see {@link minPercentage}
       * @defaultValue `85`
       */
      maxPercentage?: number;
    }

    /**
     * A server-only safe util to generate a random skeleton placeholder.
     *
     * @example
     * ```tsx
     * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
     * import "server-only";
     *
     * export function RandomSkeletonPlaceholder(): ReactElement {
     *   return
     *     <div
     *       style={randomSkeletonPlaceholder()}
     *       className={skeletonPlaceholder()}
     *     />
     *   );
     * }
     * ```
     * @remarks \@since 6.0.0
     */
    export function randomSkeletonPlaceholder(
      options: SkeletonPlaceholderRandomOptions = {}
    ): CSSProperties {
      const {
        minDelay = 0,
        maxDelay = 400,
        minPercentage = 40,
        maxPercentage = 85,
      } = options;

      return {
        animationDelay: `-${randomInt({
          min: minDelay,
          max: maxDelay,
        })}ms`,
        width: `${randomInt({
          min: minPercentage,
          max: maxPercentage,
        })}%`,
      };
    }