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.08

/src/PuffLoader.tsx

"use client";

import * as React from "react";

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

const puff = [
  createAnimation("PuffLoader", "0% {transform: scale(0)} 100% {transform: scale(1.0)}", "puff-1"),
  createAnimation("PuffLoader", "0% {opacity: 1} 100% {opacity: 0}", "puff-2"),
];

function PuffLoader({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  size = 60,
  ...additionalprops
}: LoaderSizeProps) {
  const wrapper: React.CSSProperties = {
    display: "inherit",
    position: "relative",
    width: cssValue(size),
    height: cssValue(size),
    ...cssOverride,
  };

  const style = (i: number): React.CSSProperties => {
    return {
      position: "absolute",
      height: cssValue(size),
      width: cssValue(size),
      border: `thick solid ${color}`,
      borderRadius: "50%",
      opacity: "1",
      top: "0",
      left: "0",
      animationFillMode: "both",
      animation: `${puff[0]}, ${puff[1]}`,
      animationDuration: `${2 / speedMultiplier}s`,
      animationIterationCount: "infinite",
      animationTimingFunction:
        "cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1)",
      animationDelay: i === 1 ? "-1s" : "0s",
    };
  };

  if (!loading) {
    return null;
  }

  return (
    <span style={wrapper} {...additionalprops}>
      <span style={style(1)} />
      <span style={style(2)} />
    </span>
  );
}

export default PuffLoader;

1	"use client";
2
3	import * as React from "react";	1✔
4		1!
5	import { cssValue } from "./helpers/unitConverter";	×
6	import { LoaderSizeProps } from "./helpers/props";	×
7	import { createAnimation } from "./helpers/animation";	×
8		×
9	const puff = [
10	createAnimation("PuffLoader", "0% {transform: scale(0)} 100% {transform: scale(1.0)}", "puff-1"),	×
11	createAnimation("PuffLoader", "0% {opacity: 1} 100% {opacity: 0}", "puff-2"),
12	];	1✔
13
14	function PuffLoader({	1!
15	loading = true,	41!
16	color = "#000000",	41✔
17	speedMultiplier = 1,	41!
18	cssOverride = {},	41✔
19	size = 60,
20	...additionalprops	41✔
21	}: LoaderSizeProps) {
22	const wrapper: React.CSSProperties = {	×
23	display: "inherit",	×
24	position: "relative",
25	width: cssValue(size),	1!
26	height: cssValue(size),	1✔
27	...cssOverride,
28	};	×
29
30	const style = (i: number): React.CSSProperties => {	1✔
31	return {	1✔
32	position: "absolute",	1!
33	height: cssValue(size),	×
34	width: cssValue(size),	×
35	border: `thick solid ${color}`,	×
36	borderRadius: "50%",
37	opacity: "1",	1✔
38	top: "0",
39	left: "0",	1✔
40	animationFillMode: "both",	1!
41	animation: `${puff[0]}, ${puff[1]}`,	1✔
42	animationDuration: `${2 / speedMultiplier}s`,	41!
43	animationIterationCount: "infinite",	1✔
44	animationTimingFunction:	1✔
45	"cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1)",
46	animationDelay: i === 1 ? "-1s" : "0s",
47	};	1✔
48	};	3✔
49		3✔
50	if (!loading) {	1✔
51	return null;	3!
52	}	3✔
53		×
54	return (	×
55	<span style={wrapper} {...additionalprops}>
56	<span style={style(1)} />	3✔
57	<span style={style(2)} />
58	</span>	1✔
59	);	1✔
60	}	1✔
61		1✔
62	export default PuffLoader;	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