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

69.29

/src/SyncLoader.tsx

"use client";

import * as React from "react";

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

const sync = createAnimation(
  "SyncLoader",
  `33% {transform: translateY(10px)}
  66% {transform: translateY(-10px)}
  100% {transform: translateY(0)}`,
  "sync"
);

function SyncLoader({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  size = 15,
  margin = 2,
  ...additionalprops
}: LoaderSizeMarginProps) {
  const wrapper: React.CSSProperties = {
    display: "inherit",
    ...cssOverride,
  };

  const style = (i: number): React.CSSProperties => {
    return {
      backgroundColor: color,
      width: cssValue(size),
      height: cssValue(size),
      margin: cssValue(margin),
      borderRadius: "100%",
      display: "inline-block",
      animation: `${sync} ${0.6 / speedMultiplier}s ${i * 0.07}s infinite ease-in-out`,
      animationFillMode: "both",
    };
  };

  if (!loading) {
    return null;
  }

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

export default SyncLoader;

1	"use client";
2
3	import * as React from "react";	1✔
4		1!
5	import { LoaderSizeMarginProps } from "./helpers/props";	×
6	import { createAnimation } from "./helpers/animation";	×
7	import { cssValue } from "./helpers/unitConverter";	×
8		×
9	const sync = createAnimation(
10	"SyncLoader",	×
11	`33% {transform: translateY(10px)}
12	66% {transform: translateY(-10px)}	1✔
13	100% {transform: translateY(0)}`,
14	"sync"	1!
15	);	41!
16		41✔
17	function SyncLoader({	41!
18	loading = true,	41✔
19	color = "#000000",
20	speedMultiplier = 1,	41✔
21	cssOverride = {},
22	size = 15,	×
23	margin = 2,	×
24	...additionalprops
25	}: LoaderSizeMarginProps) {	1!
26	const wrapper: React.CSSProperties = {	1✔
27	display: "inherit",
28	...cssOverride,	×
29	};
30		1✔
31	const style = (i: number): React.CSSProperties => {	1✔
32	return {	1!
33	backgroundColor: color,	×
34	width: cssValue(size),	×
35	height: cssValue(size),	×
36	margin: cssValue(margin),
37	borderRadius: "100%",	1✔
38	display: "inline-block",
39	animation: `${sync} ${0.6 / speedMultiplier}s ${i * 0.07}s infinite ease-in-out`,	1✔
40	animationFillMode: "both",	1!
41	};	1✔
42	};	41!
43		1✔
44	if (!loading) {	1✔
45	return null;
46	}
47		1✔
48	return (	3✔
49	<span style={wrapper} {...additionalprops}>	3✔
50	<span style={style(1)} />	1✔
51	<span style={style(2)} />	3!
52	<span style={style(3)} />	3✔
53	</span>	×
54	);	×
55	}
56		3✔
57	export default SyncLoader;

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