gt - Update Spinner to use SVG vs CSS for shapes #300
Conversation
|
BTW I may remove the duration and segment props, just seemed harmless to add |
src/components/Spinner.js
Outdated
| <path id="shape" d="M20,10 A10,10 0 1 0 20,-10 L-20,-10 A10,10 0 1 0 -20,10" fill={color} /> | ||
| </defs> | ||
| <g transform="translate(-100,-100)"> | ||
| {[...Array(segments).keys()].map(i => { |
There was a problem hiding this comment.
lol what are you doing.
function range(size) {
const result = [];
for(let i = 0; i < size; i++) result.push(i);
return result;
}There was a problem hiding this comment.
Haha I was proud of this range hack, np will extract
|
Actually the |
- Use CSS animaton vs <animate> tag - Extract range - Remove segments prop - Move duration and size to string - Update story
|
Haha, sorry, and thanks for adding. The same SVG should be feasible to use as image in APM assets now too. |
- Make classname more specific - Remove duration from props, had animation issues on updates
| <path id="shape" d="M20,10 A10,10 0 1 0 20,-10 L-20,-10 A10,10 0 1 0 -20,10" fill={color} /> | ||
| </defs> | ||
| <style>{` | ||
| .gears-spinner { |
There was a problem hiding this comment.
Let's make this a unique id stored in the state. Otherwise 2 spinners with different props will collide. (oh how much shadow DOM would have been nice here 👍 )
There was a problem hiding this comment.
We could, but note that the props do not modify the styles or animation any longer, so there's no concerns about a conflict afaik. (I removed due to them not cleanly working with animations on changes)
There was a problem hiding this comment.
In that case, shouldn't we keep them then as a CSS file that gets attached to the page like other components that inject CSS?
No description provided.