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

/src/ClockLoader.tsx

"use client";

import * as React from "react";

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

const rotate = createAnimation("ClockLoader", "100% { transform: rotate(360deg) }", "rotate");

function ClockLoader({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  size = 50,
  ...additionalprops
}: LoaderSizeProps) {
  const { value, unit } = parseLengthAndUnit(size);

  const wrapper: React.CSSProperties = {
    display: "inherit",
    position: "relative",
    width: `${value}${unit}`,
    height: `${value}${unit}`,
    backgroundColor: "transparent",
    boxShadow: `inset 0px 0px 0px 2px ${color}`,
    borderRadius: "50%",
    ...cssOverride,
  };

  const minute: React.CSSProperties = {
    position: "absolute",
    backgroundColor: color,
    width: `${value / 3}px`,
    height: "2px",
    top: `${value / 2 - 1}px`,
    left: `${value / 2 - 1}px`,
    transformOrigin: "1px 1px",
    animation: `${rotate} ${8 / speedMultiplier}s linear infinite`,
  };

  const hour: React.CSSProperties = {
    position: "absolute",
    backgroundColor: color,
    width: `${value / 2.4}px`,
    height: "2px",
    top: `${value / 2 - 1}px`,
    left: `${value / 2 - 1}px`,
    transformOrigin: "1px 1px",
    animation: `${rotate} ${2 / speedMultiplier}s linear infinite`,
  };

  if (!loading) {
    return null;
  }

  return (
    <span style={wrapper} {...additionalprops}>
      <span style={hour} />
      <span style={minute} />
    </span>
  );
}

export default ClockLoader;

1	"use client";
2
3	import * as React from "react";	1✔
4		1!
5	import { parseLengthAndUnit } from "./helpers/unitConverter";	×
6	import { LoaderSizeProps } from "./helpers/props";	×
7	import { createAnimation } from "./helpers/animation";	×
8		×
9	const rotate = createAnimation("ClockLoader", "100% { transform: rotate(360deg) }", "rotate");
10		×
11	function ClockLoader({
12	loading = true,	1✔
13	color = "#000000",
14	speedMultiplier = 1,	1!
15	cssOverride = {},	41!
16	size = 50,	41✔
17	...additionalprops	41!
18	}: LoaderSizeProps) {	41✔
19	const { value, unit } = parseLengthAndUnit(size);
20		41✔
21	const wrapper: React.CSSProperties = {
22	display: "inherit",	×
23	position: "relative",	×
24	width: `${value}${unit}`,
25	height: `${value}${unit}`,	1!
26	backgroundColor: "transparent",	1✔
27	boxShadow: `inset 0px 0px 0px 2px ${color}`,
28	borderRadius: "50%",	×
29	...cssOverride,
30	};	1✔
31		1✔
32	const minute: React.CSSProperties = {	1!
33	position: "absolute",	×
34	backgroundColor: color,	×
35	width: `${value / 3}px`,	×
36	height: "2px",
37	top: `${value / 2 - 1}px`,	1✔
38	left: `${value / 2 - 1}px`,
39	transformOrigin: "1px 1px",	1✔
40	animation: `${rotate} ${8 / speedMultiplier}s linear infinite`,	1!
41	};	1✔
42		41!
43	const hour: React.CSSProperties = {	1✔
44	position: "absolute",	1✔
45	backgroundColor: color,
46	width: `${value / 2.4}px`,
47	height: "2px",	1✔
48	top: `${value / 2 - 1}px`,	3✔
49	left: `${value / 2 - 1}px`,	3✔
50	transformOrigin: "1px 1px",	1✔
51	animation: `${rotate} ${2 / speedMultiplier}s linear infinite`,	3!
52	};	3✔
53		×
54	if (!loading) {	×
55	return null;
56	}	3✔
57
58	return (	1✔
59	<span style={wrapper} {...additionalprops}>	1✔
60	<span style={hour} />	1✔
61	<span style={minute} />	1✔
62	</span>	1✔
63	);
64	}	3!
65		3✔
66	export default ClockLoader;	3✔

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