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

71.64

/src/HashLoader.tsx

"use client";

import * as React from "react";

import { calculateRgba } from "./helpers/colors";
import { parseLengthAndUnit, cssValue } from "./helpers/unitConverter";
import { LoaderSizeProps } from "./helpers/props";
import { createAnimation } from "./helpers/animation";

function HashLoader({
  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: cssValue(size),
    height: cssValue(size),
    transform: "rotate(165deg)",
    ...cssOverride,
  };

  const thickness = value / 5;

  const lat = (value - thickness) / 2;

  const offset = lat - thickness;

  const colorValue = calculateRgba(color, 0.75);

  const before = createAnimation(
    "HashLoader",
    `0% {width: ${thickness}px; box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}
    35% {width: ${cssValue(size)}; box-shadow: 0 ${-offset}px ${colorValue}, 0 ${offset}px ${colorValue}}
    70% {width: ${thickness}px; box-shadow: ${-lat}px ${-offset}px ${colorValue}, ${lat}px ${offset}px ${colorValue}}
    100% {box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}`,
    "before"
  );

  const after = createAnimation(
    "HashLoader",
    `0% {height: ${thickness}px; box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}
    35% {height: ${cssValue(size)}; box-shadow: ${offset}px 0 ${color}, ${-offset}px 0 ${color}}
    70% {height: ${thickness}px; box-shadow: ${offset}px ${-lat}px ${color}, ${-offset}px ${lat}px ${color}}
    100% {box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}`,
    "after"
  );

  const style = (i: number): React.CSSProperties => {
    return {
      position: "absolute",
      top: "50%",
      left: "50%",
      display: "block",
      width: `${value / 5}${unit}`,
      height: `${value / 5}${unit}`,
      borderRadius: `${value / 10}${unit}`,
      transform: "translate(-50%, -50%)",
      animationFillMode: "none",
      animation: `${i === 1 ? before : after} ${2 / speedMultiplier}s infinite`,
    };
  };

  if (!loading) {
    return null;
  }

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

export default HashLoader;

1	"use client";
2
3	import * as React from "react";	1✔
4		1!
5	import { calculateRgba } from "./helpers/colors";	×
6	import { parseLengthAndUnit, cssValue } from "./helpers/unitConverter";	×
7	import { LoaderSizeProps } from "./helpers/props";	×
8	import { createAnimation } from "./helpers/animation";	×
9
10	function HashLoader({	×
11	loading = true,
12	color = "#000000",	1✔
13	speedMultiplier = 1,
14	cssOverride = {},	1!
15	size = 50,	41!
16	...additionalprops	41✔
17	}: LoaderSizeProps) {	41!
18	const { value, unit } = parseLengthAndUnit(size);	41✔
19
20	const wrapper: React.CSSProperties = {	41✔
21	display: "inherit",
22	position: "relative",	×
23	width: cssValue(size),	×
24	height: cssValue(size),
25	transform: "rotate(165deg)",	1!
26	...cssOverride,	1✔
27	};
28		×
29	const thickness = value / 5;
30		1✔
31	const lat = (value - thickness) / 2;	1✔
32		1!
33	const offset = lat - thickness;	×
34		×
35	const colorValue = calculateRgba(color, 0.75);	×
36
37	const before = createAnimation(	1✔
38	"HashLoader",
39	`0% {width: ${thickness}px; box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}	1✔
40	35% {width: ${cssValue(size)}; box-shadow: 0 ${-offset}px ${colorValue}, 0 ${offset}px ${colorValue}}	1!
41	70% {width: ${thickness}px; box-shadow: ${-lat}px ${-offset}px ${colorValue}, ${lat}px ${offset}px ${colorValue}}	1✔
42	100% {box-shadow: ${lat}px ${-offset}px ${colorValue}, ${-lat}px ${offset}px ${colorValue}}`,	41!
43	"before"	1✔
44	);	1✔
45
46	const after = createAnimation(
47	"HashLoader",	1✔
48	`0% {height: ${thickness}px; box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}	3✔
49	35% {height: ${cssValue(size)}; box-shadow: ${offset}px 0 ${color}, ${-offset}px 0 ${color}}	3✔
50	70% {height: ${thickness}px; box-shadow: ${offset}px ${-lat}px ${color}, ${-offset}px ${lat}px ${color}}	1✔
51	100% {box-shadow: ${offset}px ${lat}px ${color}, ${-offset}px ${-lat}px ${color}}`,	3!
52	"after"	3✔
53	);	×
54		×
55	const style = (i: number): React.CSSProperties => {
56	return {	3✔
57	position: "absolute",
58	top: "50%",	1✔
59	left: "50%",	1✔
60	display: "block",	1✔
61	width: `${value / 5}${unit}`,	1✔
62	height: `${value / 5}${unit}`,	1✔
63	borderRadius: `${value / 10}${unit}`,
64	transform: "translate(-50%, -50%)",	3!
65	animationFillMode: "none",	3✔
66	animation: `${i === 1 ? before : after} ${2 / speedMultiplier}s infinite`,	3✔
67	};	3✔
68	};	3✔
69		3✔
70	if (!loading) {	3✔
71	return null;	3✔
72	}	3✔
73		3✔
74	return (	4✔
75	<span style={wrapper} {...additionalprops}>
76	<span style={style(1)} />
77	<span style={style(2)} />
78	</span>
79	);
80	}
81
82	export default HashLoader;

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