14458015078

Committed 14 Apr 2025 11:47PM UTC coverage: 71.708%. Remained the same

Build # 14458015078

Build Type

push

github

Committed by

web-flow

Commit Message

fix: add use client to ensure loaders run on server components  (#639)

fix

Run Details

1154 of 1753 branches covered (65.83%)

Branch coverage included in aggregate %.

1122 of 1421 relevant lines covered (78.96%)

6.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

70.13

/src/ScaleLoader.tsx

"use client";

import * as React from "react";

import { cssValue } from "./helpers/unitConverter";
import { LoaderHeightWidthRadiusProps } from "./helpers/props";
import { createAnimation } from "./helpers/animation";

const scale = createAnimation(
  "ScaleLoader",
  "0% {transform: scaley(1.0)} 50% {transform: scaley(0.4)} 100% {transform: scaley(1.0)}",
  "scale"
);

function ScaleLoader({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  height = 35,
  width = 4,
  radius = 2,
  margin = 2,
  barCount = 5,
  ...additionalprops
}: LoaderHeightWidthRadiusProps & { barCount?: number }) {
  const wrapper: React.CSSProperties = {
    display: "inherit",
    ...cssOverride,
  };

  const style = (i: number): React.CSSProperties => {
    return {
      backgroundColor: color,
      width: cssValue(width),
      height: cssValue(height),
      margin: cssValue(margin),
      borderRadius: cssValue(radius),
      display: "inline-block",
      animation: `${scale} ${1 / speedMultiplier}s ${i * 0.1}s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)`,
      animationFillMode: "both",
    };
  };

  if (!loading) {
    return null;
  }

  return (
    <span style={wrapper} {...additionalprops}>
      {[...Array(barCount)].map((_, i) => (
        <span key={i} style={style(i + 1)} />
      ))}
    </span>
  );
}

export default ScaleLoader;

1	"use client";
2
3	import * as React from "react";	1✔
4		1!
5	import { cssValue } from "./helpers/unitConverter";	×
6	import { LoaderHeightWidthRadiusProps } from "./helpers/props";	×
7	import { createAnimation } from "./helpers/animation";	×
8		×
9	const scale = createAnimation(
10	"ScaleLoader",	×
11	"0% {transform: scaley(1.0)} 50% {transform: scaley(0.4)} 100% {transform: scaley(1.0)}",
12	"scale"	1✔
13	);
14		1!
15	function ScaleLoader({	41!
16	loading = true,	41✔
17	color = "#000000",	41!
18	speedMultiplier = 1,	41✔
19	cssOverride = {},
20	height = 35,	41✔
21	width = 4,
22	radius = 2,	×
23	margin = 2,	×
24	barCount = 5,
25	...additionalprops	1!
26	}: LoaderHeightWidthRadiusProps & { barCount?: number }) {	1✔
27	const wrapper: React.CSSProperties = {
28	display: "inherit",	×
29	...cssOverride,
30	};	1✔
31		1✔
32	const style = (i: number): React.CSSProperties => {	1!
33	return {	×
34	backgroundColor: color,	×
35	width: cssValue(width),	×
36	height: cssValue(height),
37	margin: cssValue(margin),	1✔
38	borderRadius: cssValue(radius),
39	display: "inline-block",	1✔
40	animation: `${scale} ${1 / speedMultiplier}s ${i * 0.1}s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)`,	1!
41	animationFillMode: "both",	1✔
42	};	41!
43	};	1✔
44		1✔
45	if (!loading) {
46	return null;
47	}	1✔
48		3✔
49	return (	3✔
50	<span style={wrapper} {...additionalprops}>	1✔
51	{[...Array(barCount)].map((_, i) => (	3!
52	<span key={i} style={style(i + 1)} />	3✔
53	))}	×
54	</span>	×
55	);
56	}	3✔
57
58	export default ScaleLoader;	1✔

davidhu2000 / react-spinners / 14458015078

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous