panelui-native 0.22.6 → 0.25.0

package/lib/module/components/loader/index.js

@@ -0,0 +1,758 @@
+"use strict";
+
+/**
+ * Loading animations.
+ *
+ * ## Why one component and not nine
+ *
+ * These are interchangeable. A loader is chosen once, for the character it
+ * gives a screen, and then it is the same loader everywhere — so the thing
+ * that varies is a value, not a component. `variant` keeps the swap to one
+ * word and keeps every one of them on the same props: the same colour
+ * resolution, the same `speed`, the same reduced-motion behaviour, the same
+ * accessibility. Nine exports would mean nine chances for those to drift.
+ *
+ * ## Why they are drawn the way they are
+ *
+ * Anything with a fixed, small number of moving pieces is a view per piece
+ * with a `useAnimatedStyle` on it: three dots is three transforms a frame, and
+ * that is cheaper than rebuilding a path string.
+ *
+ * Anything whose count is high, or whose shape is derived rather than
+ * declared, is a single SVG path rebuilt on the UI thread. Fifteen bars
+ * following a bouncing ball is one animated prop that way and fifteen the
+ * other, and the fifteen do not stay in step with each other for free.
+ *
+ * ## Reduced motion
+ *
+ * Every variant draws a representative still frame rather than freezing at
+ * whatever it happened to be showing. A stopped animation should look like a
+ * shape someone drew, not like a bug caught mid-cycle.
+ */
+import { memo, useEffect } from 'react';
+import { View } from 'react-native';
+import Svg, { Ellipse, Path } from 'react-native-svg';
+import Animated, { Easing, cancelAnimation, useAnimatedProps, useAnimatedStyle, useFrameCallback, useReducedMotion, useSharedValue, withDelay, withRepeat, withTiming } from 'react-native-reanimated';
+import { useCSSVariable } from 'uniwind';
+import { tv } from 'tailwind-variants';
+import { useIconColor } from "../../icons/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
+const loaderVariants = tv({
+  base: 'items-center justify-center'
+});
+/** Geometry at `md`. Every number here is multiplied by the size scale. */
+const GEOMETRY = {
+  'pulse-dots': {
+    dot: 10,
+    gap: 6,
+    count: 3
+  },
+  'bounce-dots': {
+    dot: 10,
+    gap: 6,
+    count: 3,
+    travel: 8
+  },
+  'pulsating-dots': {
+    dot: 11,
+    gap: 8,
+    count: 3
+  },
+  'liquid-dots': {
+    radius: 11,
+    travel: 15,
+    width: 72,
+    height: 32
+  },
+  'bar-cascade': {
+    bar: 5,
+    gap: 4,
+    count: 5,
+    min: 8,
+    max: 26
+  },
+  'bouncing-bars': {
+    bar: 5,
+    gap: 6,
+    count: 3,
+    height: 30
+  },
+  'symmetric-wave': {
+    bar: 5,
+    gap: 5,
+    count: 9,
+    min: 7,
+    max: 26
+  },
+  'morph-ring': {
+    box: 34,
+    border: 3
+  },
+  'wave-physics': {
+    bar: 5,
+    gap: 3,
+    count: 15,
+    base: 7,
+    peak: 26
+  }
+};
+const SIZE_SCALE = {
+  sm: 0.75,
+  md: 1,
+  lg: 1.35
+};
+
+/**
+ * A theme token rather than a colour. Tokens are named, not written, so the
+ * leading `--` tells the two apart without the caller having to say which.
+ */
+function isToken(value) {
+  return typeof value === 'string' && value.startsWith('--');
+}
+
+/** One decimal is past the point a path string can show, and cheaper to build. */
+function q(value) {
+  'worklet';
+
+  return Math.round(value * 10) / 10;
+}
+
+/** A closed circle as a path subpath, so several can share one `Path`. */
+function circle(cx, cy, r) {
+  'worklet';
+
+  return `M${q(cx - r)},${q(cy)}` + `A${q(r)},${q(r)} 0 1 0 ${q(cx + r)},${q(cy)}` + `A${q(r)},${q(r)} 0 1 0 ${q(cx - r)},${q(cy)}Z`;
+}
+
+/* -------------------------------------------------------------------------- */
+/* dots                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * One dot.
+ *
+ * A component rather than a loop of `useAnimatedStyle` inside the parent: the
+ * count is geometry, and a loop of hooks is a rule waiting to be broken by
+ * whoever changes it.
+ */
+const Dot = /*#__PURE__*/memo(function Dot({
+  size,
+  color,
+  delay,
+  duration,
+  from,
+  to,
+  property,
+  still,
+  animate
+}) {
+  const progress = useSharedValue(animate ? from : still);
+  useEffect(() => {
+    if (!animate) {
+      progress.value = still;
+      return;
+    }
+    progress.value = from;
+    progress.value = withDelay(delay,
+    // Reversing rather than a three-stop keyframe: every one of these
+    // animations returns to where it started, and a reversed repeat says so
+    // in one line without a midpoint to keep in step.
+    withRepeat(withTiming(to, {
+      duration,
+      easing: Easing.inOut(Easing.quad)
+    }), -1, true));
+    return () => cancelAnimation(progress);
+  }, [animate, delay, duration, from, to, still, progress]);
+  const style = useAnimatedStyle(() => {
+    if (property === 'opacity') return {
+      opacity: progress.value
+    };
+    if (property === 'translateY') {
+      return {
+        transform: [{
+          translateY: progress.value
+        }]
+      };
+    }
+    return {
+      opacity: 0.5 + (progress.value - 1) * 1,
+      transform: [{
+        scale: progress.value
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: color
+    }, style]
+  });
+});
+
+/* -------------------------------------------------------------------------- */
+/* bars                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/** One bar. Same reasoning as `Dot`. */
+const Bar = /*#__PURE__*/memo(function Bar({
+  width,
+  color,
+  delay,
+  duration,
+  from,
+  to,
+  mode,
+  barHeight,
+  still,
+  animate
+}) {
+  const progress = useSharedValue(animate ? from : still);
+  useEffect(() => {
+    if (!animate) {
+      progress.value = still;
+      return;
+    }
+    progress.value = from;
+    progress.value = withDelay(delay, withRepeat(withTiming(to, {
+      duration,
+      easing: Easing.inOut(Easing.quad)
+    }), -1, true));
+    return () => cancelAnimation(progress);
+  }, [animate, delay, duration, from, to, still, progress]);
+  const style = useAnimatedStyle(() => mode === 'height' ? {
+    height: progress.value
+  } : {
+    transform: [{
+      scaleY: progress.value
+    }]
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      width,
+      borderRadius: width / 2,
+      backgroundColor: color,
+      ...(mode === 'scale' ? {
+        height: barHeight
+      } : null)
+    }, style]
+  });
+});
+
+/* -------------------------------------------------------------------------- */
+/* liquid dots                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Two blobs that merge as they cross.
+ *
+ * The merge is the whole animation, and it is drawn rather than filtered: a
+ * blur-and-threshold pass is how this is usually done, and SVG filters do not
+ * render on native at all. Instead the two circles and the neck between them
+ * are three subpaths of one path, unioned by the non-zero fill rule — which
+ * costs one animated prop a frame, and gives a crisper edge than a threshold
+ * ever does.
+ *
+ * The neck is what sells it. It pinches inward as the blobs separate and
+ * vanishes once they are far enough apart, so they let go of each other
+ * instead of snapping.
+ */
+function LiquidDots({
+  color,
+  scale,
+  speed,
+  animate
+}) {
+  const g = GEOMETRY['liquid-dots'];
+  const r = g.radius * scale;
+  const travel = g.travel * scale;
+  const width = g.width * scale;
+  const height = g.height * scale;
+  const cy = height / 2;
+  const mid = width / 2;
+
+  // -1 to 1: where the left blob is along its travel. The right blob mirrors.
+  const t = useSharedValue(animate ? -1 : -0.35);
+  useEffect(() => {
+    if (!animate) {
+      t.value = -0.35;
+      return;
+    }
+    t.value = -1;
+    t.value = withRepeat(withTiming(1, {
+      duration: 2000 / speed,
+      easing: Easing.inOut(Easing.quad)
+    }), -1, true);
+    return () => cancelAnimation(t);
+  }, [animate, speed, t]);
+  const props = useAnimatedProps(() => {
+    const x1 = mid + t.value * travel;
+    const x2 = mid - t.value * travel;
+    const left = Math.min(x1, x2);
+    const right = Math.max(x1, x2);
+    const gap = right - left;
+    let d = circle(left, cy, r) + circle(right, cy, r);
+
+    /*
+     * The neck only exists while the blobs are close enough to be pulling on
+     * each other: `1` when they are concentric, and gone by the time they are
+     * a radius apart. Squared, so it thins out quickly rather than trailing.
+     *
+     * The thickness is what the cutoff is really on. A falloff that only
+     * approaches zero leaves a hairline spanning the gap for the whole of the
+     * rest of the travel, and a one-pixel bar between two circles reads as a
+     * drawing mistake rather than as a thinning neck — so below the point
+     * where it is still legibly a neck, it is not drawn at all.
+     */
+    const pull = Math.max(0, 1 - gap / (r * 2.2));
+    const half = r * pull * pull * 0.95;
+    if (half > r * 0.12 && gap > 1) {
+      // Pinched at the middle: the control point sits inside the straight
+      // line between the two, which is what makes the join read as surface
+      // tension rather than as a rectangle.
+      const waist = half * 0.55;
+      d += `M${q(left)},${q(cy - half)}` + `Q${q((left + right) / 2)},${q(cy - waist)} ${q(right)},${q(cy - half)}` + `L${q(right)},${q(cy + half)}` + `Q${q((left + right) / 2)},${q(cy + waist)} ${q(left)},${q(cy + half)}Z`;
+    }
+    return {
+      d
+    };
+  });
+  return /*#__PURE__*/_jsx(Svg, {
+    width: width,
+    height: height,
+    children: /*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: props,
+      fill: color,
+      fillRule: "nonzero"
+    })
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* wave physics                                                               */
+/* -------------------------------------------------------------------------- */
+
+/** How many bounces the ball takes crossing the row once. */
+const BOUNCES = 4;
+
+/**
+ * A ball bouncing along a row of bars, pushing them down where it lands.
+ *
+ * The only variant with anything like physics in it, and the reason it is
+ * procedural rather than a keyframe list: the bar heights are a function of
+ * where the ball is, so they are derived every frame instead of stored. Fifteen
+ * bars precomputed would be fifteen arrays that have to agree with each other
+ * and with the ball, and none of them could respond to `speed`.
+ *
+ * Both the bars and the ball read the same clock, which is what keeps the
+ * dent under the ball rather than near it.
+ */
+function WavePhysics({
+  color,
+  scale,
+  speed,
+  animate
+}) {
+  const g = GEOMETRY['wave-physics'];
+  const barWidth = g.bar * scale;
+  const step = (g.bar + g.gap) * scale;
+  const base = g.base * scale;
+  const peak = g.peak * scale;
+  const ballR = g.bar * 1.1 * scale;
+  const bounce = peak * 0.9;
+  const width = (g.count - 1) * step + barWidth;
+  const height = base + peak + bounce + ballR * 2;
+  const floor = height;
+  const clock = useSharedValue(0);
+  const frame = useFrameCallback(info => {
+    'worklet';
+
+    // Accumulated rather than read off the total, so `speed` can change
+    // mid-animation without the ball jumping to where the new rate would have
+    // put it. A dropped frame is clamped: a 300ms hitch played at full rate
+    // is a lurch, not a bounce.
+    const delta = Math.min(info.timeSincePreviousFrame ?? 16, 48) / 1000;
+    clock.value += delta * speed * 0.35;
+  }, false);
+  const {
+    setActive
+  } = frame;
+  useEffect(() => {
+    setActive(animate);
+    return () => setActive(false);
+  }, [animate, setActive]);
+
+  /** Where the ball is, as a bar index, and how far through its hop. */
+  const ballAt = time => {
+    'worklet';
+
+    // Back and forth along the row, then back again — one continuous pass.
+    const cycle = time % 2;
+    const across = cycle < 1 ? cycle : 2 - cycle;
+    const index = across * (g.count - 1);
+    let phase = across * BOUNCES % 1;
+    if (across === 0 || across === 1) phase = 0;
+    // A parabola per hop: the ball is slowest at the top, which is the only
+    // part of a bounce anyone actually reads.
+    const lift = 4 * phase * (1 - phase);
+    return {
+      index,
+      lift
+    };
+  };
+  const barProps = useAnimatedProps(() => {
+    const {
+      index,
+      lift
+    } = animate ? ballAt(clock.value) : {
+      index: 7,
+      lift: 0.5
+    };
+    // The ball presses hardest when it is on the ground, so the dent is the
+    // inverse of the hop.
+    const press = Math.max(0, 1 - lift * 2);
+    let d = '';
+    for (let i = 0; i < g.count; i++) {
+      const distance = Math.abs(i - index);
+      // A raised crest travelling with the ball, three bars wide either side.
+      const crest = distance < 3 ? Math.cos(distance / 3 * (Math.PI / 2)) : 0;
+      // And a dent right under it, narrower than the crest so the bar the
+      // ball is standing on is pushed down through its own rise.
+      const dent = distance < 1.5 ? Math.cos(distance / 1.5 * (Math.PI / 2)) * press * (peak * 0.5) : 0;
+      const barHeight = Math.max(base * 0.5, base + crest * peak - dent);
+      const x = q(barWidth / 2 + i * step);
+      d += `M${x},${q(floor)}L${x},${q(floor - barHeight)}`;
+    }
+    return {
+      d
+    };
+  });
+  const ballProps = useAnimatedProps(() => {
+    const {
+      index,
+      lift
+    } = animate ? ballAt(clock.value) : {
+      index: 7,
+      lift: 0.5
+    };
+    const press = Math.max(0, 1 - lift * 2);
+    // The ball rides the bar directly under it, which is the crest of the
+    // wave (so the full `peak`) minus however hard it is pressing.
+    const rest = base + peak - press * (peak * 0.5);
+
+    // Squash on the ground, stretch at the top — the oldest trick there is,
+    // and the thing that separates a bouncing ball from a moving circle.
+    const squash = press;
+    return {
+      cx: q(barWidth / 2 + index * step),
+      cy: q(floor - rest - ballR + squash * ballR * 0.3 - lift * bounce),
+      rx: q(ballR * (1 + squash * 0.25)),
+      ry: q(ballR * (1 - squash * 0.28))
+    };
+  });
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: width,
+    height: height,
+    children: [/*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: barProps,
+      stroke: color,
+      strokeWidth: barWidth,
+      strokeLinecap: "round",
+      fill: "none",
+      opacity: 0.55
+    }), /*#__PURE__*/_jsx(AnimatedEllipse, {
+      animatedProps: ballProps,
+      fill: color
+    })]
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* morph ring                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * A square turning into a circle and back while it rotates.
+ *
+ * The rotation is what makes the morph legible: a square becoming a circle in
+ * place mostly reads as a square getting smaller, and turning it means the
+ * corners are visibly going somewhere as they round off.
+ */
+function MorphRing({
+  color,
+  scale,
+  speed,
+  animate
+}) {
+  const g = GEOMETRY['morph-ring'];
+  const box = g.box * scale;
+  const border = Math.max(2, g.border * scale);
+  const progress = useSharedValue(animate ? 0 : 0.5);
+  useEffect(() => {
+    if (!animate) {
+      progress.value = 0.5;
+      return;
+    }
+    progress.value = 0;
+    progress.value = withRepeat(withTiming(1, {
+      duration: 2000 / speed,
+      easing: Easing.inOut(Easing.quad)
+    }), -1, true);
+    return () => cancelAnimation(progress);
+  }, [animate, speed, progress]);
+  const style = useAnimatedStyle(() => ({
+    borderRadius: box * (0.1 + progress.value * 0.4),
+    transform: [{
+      rotate: `${progress.value * 180}deg`
+    }]
+  }));
+
+  /*
+   * The padding is the rotation's. A square turned 45° needs its diagonal, so
+   * it sweeps past its own box by nearly half its width on each side — laid
+   * out flush, the corners spill over whatever is next to it.
+   */
+  const overhang = (box * Math.SQRT2 - box) / 2;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      padding: overhang
+    },
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        width: box,
+        height: box,
+        borderWidth: border,
+        borderColor: color
+      }, style]
+    })
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* root                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * A loading animation.
+ *
+ * Nine of them, chosen with `variant`. They all take the same colour, the same
+ * `speed`, and the same treatment under reduced motion, so swapping one for
+ * another is a one-word change.
+ */
+export const Loader = /*#__PURE__*/memo(function Loader({
+  variant = 'pulse-dots',
+  size = 'md',
+  color,
+  speed = 1,
+  label = 'Loading',
+  className,
+  ...props
+}) {
+  const reducedMotion = useReducedMotion();
+  const animate = !reducedMotion && speed > 0;
+  const scale = SIZE_SCALE[size];
+  const rate = speed > 0 ? speed : 1;
+
+  /*
+   * A loader inside a filled surface has to be drawn in that surface's
+   * foreground rather than the page's: a button in the primary colour is one
+   * of the most likely places for a loader to appear, and in most themes the
+   * primary colour *is* the page's foreground — so one resolving
+   * `--color-foreground` for itself would be invisible exactly there.
+   * Surfaces already publish their readable foreground for icons.
+   */
+  const inherited = useIconColor();
+  const token = useCSSVariable(isToken(color) ? color : '--color-foreground');
+  const resolved = typeof token === 'string' ? token : undefined;
+  const ink = (isToken(color) ? resolved : color) ?? inherited ?? resolved ?? '#0a0a0a';
+  const frame = content => /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: label,
+    className: loaderVariants({
+      className
+    }),
+    ...props,
+    children: content
+  });
+  if (variant === 'liquid-dots') {
+    return frame(/*#__PURE__*/_jsx(LiquidDots, {
+      color: ink,
+      scale: scale,
+      speed: rate,
+      animate: animate
+    }));
+  }
+  if (variant === 'wave-physics') {
+    return frame(/*#__PURE__*/_jsx(WavePhysics, {
+      color: ink,
+      scale: scale,
+      speed: rate,
+      animate: animate
+    }));
+  }
+  if (variant === 'morph-ring') {
+    return frame(/*#__PURE__*/_jsx(MorphRing, {
+      color: ink,
+      scale: scale,
+      speed: rate,
+      animate: animate
+    }));
+  }
+  if (variant === 'pulse-dots') {
+    const g = GEOMETRY['pulse-dots'];
+    return frame(/*#__PURE__*/_jsx(View, {
+      className: "flex-row items-center",
+      style: {
+        gap: g.gap * scale
+      },
+      children: Array.from({
+        length: g.count
+      }, (_unused, i) => /*#__PURE__*/_jsx(Dot, {
+        size: g.dot * scale,
+        color: ink,
+        delay: i * 200 / rate,
+        duration: 700 / rate,
+        from: 0.2,
+        to: 1,
+        still: i === 1 ? 1 : 0.45,
+        property: "opacity",
+        animate: animate
+      }, i))
+    }));
+  }
+  if (variant === 'bounce-dots') {
+    const g = GEOMETRY['bounce-dots'];
+    const travel = g.travel * scale;
+    return frame(/*#__PURE__*/_jsx(View, {
+      className: "flex-row items-center",
+      style: {
+        gap: g.gap * scale,
+        paddingTop: travel
+      },
+      children: Array.from({
+        length: g.count
+      }, (_unused, i) => /*#__PURE__*/_jsx(Dot, {
+        size: g.dot * scale,
+        color: ink,
+        delay: i * 100 / rate,
+        duration: 300 / rate,
+        from: 0,
+        to: -travel,
+        still: -travel * (i === 1 ? 1 : 0.35),
+        property: "translateY",
+        animate: animate
+      }, i))
+    }));
+  }
+  if (variant === 'pulsating-dots') {
+    const g = GEOMETRY['pulsating-dots'];
+    return frame(/*#__PURE__*/_jsx(View, {
+      className: "flex-row items-center"
+      // A dot at its largest is half again its laid-out size, and it grows
+      // about its centre — so a quarter of a dot on each side is the room
+      // the scale needs, plus a little for the rounding.
+      ,
+      style: {
+        gap: g.gap * scale,
+        padding: g.dot * scale * 0.3
+      },
+      children: Array.from({
+        length: g.count
+      }, (_unused, i) => /*#__PURE__*/_jsx(Dot, {
+        size: g.dot * scale,
+        color: ink,
+        delay: i * 200 / rate,
+        duration: 600 / rate,
+        from: 1,
+        to: 1.5,
+        still: i === 1 ? 1.4 : 1.1,
+        property: "scale",
+        animate: animate
+      }, i))
+    }));
+  }
+  if (variant === 'bar-cascade') {
+    const g = GEOMETRY['bar-cascade'];
+    return frame(/*#__PURE__*/_jsx(View, {
+      className: "flex-row items-center",
+      style: {
+        gap: g.gap * scale,
+        height: g.max * scale
+      },
+      children: Array.from({
+        length: g.count
+      }, (_unused, i) => /*#__PURE__*/_jsx(Bar, {
+        width: g.bar * scale,
+        color: ink,
+        delay: i * 100 / rate,
+        duration: 500 / rate,
+        from: g.min * scale,
+        to: g.max * scale
+        // A still frame that shows the cascade's shape rather than a row
+        // of equal bars, which would say nothing about what it does.
+        ,
+        still: (g.min + (g.max - g.min) * Math.abs(Math.sin(i * 0.9))) * scale,
+        mode: "height",
+        animate: animate
+      }, i))
+    }));
+  }
+  if (variant === 'bouncing-bars') {
+    const g = GEOMETRY['bouncing-bars'];
+    return frame(/*#__PURE__*/_jsx(View, {
+      className: "flex-row items-center",
+      style: {
+        gap: g.gap * scale,
+        height: g.height * scale
+      },
+      children: Array.from({
+        length: g.count
+      }, (_unused, i) => /*#__PURE__*/_jsx(Bar, {
+        width: g.bar * scale,
+        color: ink,
+        delay: i * 200 / rate,
+        duration: 500 / rate,
+        from: 0.3,
+        to: 1,
+        barHeight: g.height * scale,
+        still: 0.4 + i * 0.25,
+        mode: "scale",
+        animate: animate
+      }, i))
+    }));
+  }
+
+  // symmetric-wave
+  const g = GEOMETRY['symmetric-wave'];
+  /*
+   * The delay is symmetric about the middle rather than running left to right,
+   * so the wave opens outward from the centre and arrives back at it. A
+   * straight ramp reads as a queue; this reads as one thing breathing.
+   */
+  const offsets = [0, 1, 2, 3, 4, 3, 2, 1, 0];
+  return frame(/*#__PURE__*/_jsx(View, {
+    className: "flex-row items-center",
+    style: {
+      gap: g.gap * scale,
+      height: g.max * scale
+    },
+    children: Array.from({
+      length: g.count
+    }, (_unused, i) => /*#__PURE__*/_jsx(Bar, {
+      width: g.bar * scale,
+      color: ink,
+      delay: (offsets[i] ?? 0) * 100 / rate,
+      duration: 600 / rate,
+      from: g.min * scale,
+      to: g.max * scale,
+      still: (g.min + (g.max - g.min) * (1 - (offsets[i] ?? 0) / 4)) * scale,
+      mode: "height",
+      animate: animate
+    }, i))
+  }));
+});
+Loader.displayName = 'Loader';
+//# sourceMappingURL=index.js.map