7340c70a06
* perf: improve rendering performance for Library * fix: return onDrag and onToggle functionality to Library Items * perf: cache exportToSvg output * fix: lint warning * fix: add onClick handler into LibraryUnit * feat: better spinner * fix: useCallback for getInsertedElements to fix linter error * feat: different batch size when svgs are cached * fix: library items alignment in row * feat: skeleton instead of spinner * fix: remove unused variables * feat: use css vars instead of hadcoded colors * feat: reverting skeleton, removing spinner * cleanup and unrelated refactor * change ROWS_RENDERED_PER_BATCH to 6 --------- Co-authored-by: dwelle <luzar.david@gmail.com>
42 lines
860 B
TypeScript
42 lines
860 B
TypeScript
import React from "react";
|
|
|
|
import "./Spinner.scss";
|
|
|
|
const Spinner = ({
|
|
size = "1em",
|
|
circleWidth = 8,
|
|
synchronized = false,
|
|
}: {
|
|
size?: string | number;
|
|
circleWidth?: number;
|
|
synchronized?: boolean;
|
|
}) => {
|
|
const mountTime = React.useRef(Date.now());
|
|
const mountDelay = -(mountTime.current % 1600);
|
|
|
|
return (
|
|
<div className="Spinner">
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
// fix for remounting causing spinner flicker
|
|
["--spinner-delay" as any]: synchronized ? `${mountDelay}ms` : 0,
|
|
}}
|
|
>
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r={50 - circleWidth / 2}
|
|
strokeWidth={circleWidth}
|
|
fill="none"
|
|
strokeMiterlimit="10"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Spinner;
|