korbit-ai[bot] commented on code in PR #33782:
URL: https://github.com/apache/superset/pull/33782#discussion_r2150678684
##########
superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx:
##########
@@ -38,28 +60,31 @@ const LoaderImg = styled.img`
display: block;
}
&.floating {
- padding: 0;
+ /* padding: 0; */
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
`;
-export function Loading({
- position = 'floating',
- image,
- className,
-}: LoadingProps) {
+export function Loading({ position = 'floating', className }: LoadingProps) {
+ const [svgContent, setSvgContent] = useState('');
+
+ useEffect(() => {
+ console.log('Loading SVG');
Review Comment:
### Debug Statement in Production <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Debug console.log statement left in production code.
###### Why this matters
Leaving debug statements in production code violates clean code principles
and can clutter the console in production environments.
###### Suggested change ∙ *Feature Preview*
Remove the console.log statement or replace it with proper logging:
```typescript
useEffect(() => {
fetch('/static/assets/images/spinner.svg')
.then(response => response.text())
.then(setSvgContent);
}, []);
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/52cc0229-94c4-4c11-9939-16cfa25280e4/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/52cc0229-94c4-4c11-9939-16cfa25280e4?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/52cc0229-94c4-4c11-9939-16cfa25280e4?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/52cc0229-94c4-4c11-9939-16cfa25280e4?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/52cc0229-94c4-4c11-9939-16cfa25280e4)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:f7544d7f-5cc1-4dd2-87f3-674f50646cf3 -->
[](f7544d7f-5cc1-4dd2-87f3-674f50646cf3)
##########
superset/templates/superset/basic.html:
##########
@@ -63,16 +76,66 @@
{% block body %}
<div id="app" data-bootstrap="{{ bootstrap_data }}">
- <img
- src="{{ assets_prefix }}/static/assets/images/loading.gif"
- style="
- width: 50px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- "
- />
+ <div class="spinner">
+ <svg
+ viewBox="-36 -25 72 50"
+ xmlns="http://www.w3.org/2000/svg";
+ overflow="visible"
+ >
+ <defs>
+ <filter id="shadow1" x="-50%" y="-50%" width="200%" height="200%">
+ <feDropShadow
+ dx="1"
+ dy="1"
+ stdDeviation="2"
+ flood-color="rgba(0,0,0,0.3)"
+ />
+ </filter>
+ <path
+ id="morphPath"
+ d="M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7 -22,-0
-22,-8.7 -7,-16 0,0 Z"
+ stroke-width="7"
+ fill="transparent"
+ filter="url(#shadow1)"
+ >
+ <animate
+ attributeName="d"
+ dur="8s"
+ repeatCount="indefinite"
+ values="M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7
-22,-0 -22,-8.7 -7,-16 0,0 Z;
Review Comment:
### Inefficient Animation Duration <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The SVG animation duration is set to 8 seconds which is unnecessarily long
for a loading spinner animation cycle.
###### Why this matters
Long animation cycles can make the loading indicator appear sluggish and
unresponsive, potentially giving users the impression that the application is
slower than it actually is.
###### Suggested change ∙ *Feature Preview*
Reduce the animation duration to 2-3 seconds for a more responsive feel:
```html
<animate
attributeName="d"
dur="2s"
repeatCount="indefinite"
values="..."
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c3f249c1-6562-4c02-8bed-bb878c2bbf60/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c3f249c1-6562-4c02-8bed-bb878c2bbf60?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c3f249c1-6562-4c02-8bed-bb878c2bbf60?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c3f249c1-6562-4c02-8bed-bb878c2bbf60?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c3f249c1-6562-4c02-8bed-bb878c2bbf60)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:7637337d-2aa5-4dbe-946d-1d52fef519fd -->
[](7637337d-2aa5-4dbe-946d-1d52fef519fd)
##########
superset/templates/superset/basic.html:
##########
@@ -63,16 +76,66 @@
{% block body %}
<div id="app" data-bootstrap="{{ bootstrap_data }}">
- <img
- src="{{ assets_prefix }}/static/assets/images/loading.gif"
- style="
- width: 50px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- "
- />
+ <div class="spinner">
+ <svg
+ viewBox="-36 -25 72 50"
+ xmlns="http://www.w3.org/2000/svg";
+ overflow="visible"
+ >
+ <defs>
+ <filter id="shadow1" x="-50%" y="-50%" width="200%" height="200%">
+ <feDropShadow
+ dx="1"
+ dy="1"
+ stdDeviation="2"
+ flood-color="rgba(0,0,0,0.3)"
+ />
+ </filter>
+ <path
+ id="morphPath"
+ d="M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7 -22,-0
-22,-8.7 -7,-16 0,0 Z"
+ stroke-width="7"
+ fill="transparent"
+ filter="url(#shadow1)"
+ >
+ <animate
+ attributeName="d"
+ dur="8s"
+ repeatCount="indefinite"
+ values="M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7
-22,-0 -22,-8.7 -7,-16 0,0 Z;
Review Comment:
### Redundant Animation Keyframes <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The SVG path animation contains redundant keyframes with identical values,
increasing the animation data size unnecessarily.
###### Why this matters
Duplicate path data increases the HTML file size and requires more CPU
processing during animation rendering.
###### Suggested change ∙ *Feature Preview*
Remove duplicate keyframes and optimize the animation sequence to use fewer,
more meaningful keyframes:
```html
<animate
attributeName="d"
values="M 0,0 C 7,16 22,8.7 22,0...;
M 0,-16 C 8.7,-16 16,-8.7...;
M 0,0 C 7,-16 22,-8.7...;
M 0,16 C 8.7,16 16,8.7...;"
keyTimes="0;0.33;0.66;1"
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/9e05bd79-e7f3-45f6-9e71-2b9b34333664/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/9e05bd79-e7f3-45f6-9e71-2b9b34333664?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/9e05bd79-e7f3-45f6-9e71-2b9b34333664?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/9e05bd79-e7f3-45f6-9e71-2b9b34333664?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/9e05bd79-e7f3-45f6-9e71-2b9b34333664)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:48b38078-d535-4e43-910f-a3633152be91 -->
[](48b38078-d535-4e43-910f-a3633152be91)
##########
superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx:
##########
@@ -38,28 +60,31 @@
display: block;
}
&.floating {
- padding: 0;
+ /* padding: 0; */
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
`;
-export function Loading({
- position = 'floating',
- image,
- className,
-}: LoadingProps) {
+export function Loading({ position = 'floating', className }: LoadingProps) {
+ const [svgContent, setSvgContent] = useState('');
+
+ useEffect(() => {
+ console.log('Loading SVG');
+ fetch('/static/assets/images/spinner.svg')
+ .then(response => response.text())
+ .then(htmlString => {
+ setSvgContent(htmlString);
+ });
+ }, []);
+
return (
- <LoaderImg
+ <LoaderWrapper
className={cls('loading', position, className)}
- alt="Loading..."
- src={image || Loader}
- role="status"
- aria-live="polite"
- aria-label="Loading"
- data-test="loading-indicator"
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: svgContent }}
Review Comment:
### Unsanitized SVG Content Injection <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Direct insertion of fetched content into the DOM using
dangerouslySetInnerHTML without sanitization
###### Why this matters
This creates a potential XSS vulnerability if the SVG endpoint is
compromised or returns malicious content. An attacker could inject malicious
JavaScript through a compromised SVG file.
###### Suggested change ∙ *Feature Preview*
Use a SVG sanitization library like DOMPurify before inserting the content:
```typescript
import DOMPurify from 'dompurify';
// ...
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svgContent) }}
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d91ffce6-a7bf-4012-9dc9-797a1688a469/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d91ffce6-a7bf-4012-9dc9-797a1688a469?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d91ffce6-a7bf-4012-9dc9-797a1688a469?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d91ffce6-a7bf-4012-9dc9-797a1688a469?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/d91ffce6-a7bf-4012-9dc9-797a1688a469)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:36f02ee9-814f-4671-8787-997cad8e472f -->
[](36f02ee9-814f-4671-8787-997cad8e472f)
##########
superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx:
##########
@@ -38,28 +60,31 @@
display: block;
}
&.floating {
- padding: 0;
+ /* padding: 0; */
Review Comment:
### Remove commented-out code <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Commented-out CSS code left in the styled component.
###### Why this matters
Dead code creates confusion about whether it might be needed later or why it
was commented out.
###### Suggested change ∙ *Feature Preview*
Remove the commented-out line entirely:
```typescript
&.floating {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/138083fc-2255-4741-b372-50b16f23f33f/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/138083fc-2255-4741-b372-50b16f23f33f?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/138083fc-2255-4741-b372-50b16f23f33f?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/138083fc-2255-4741-b372-50b16f23f33f?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/138083fc-2255-4741-b372-50b16f23f33f)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:27d774de-096b-41b9-9d9f-4b63474e26b3 -->
[](27d774de-096b-41b9-9d9f-4b63474e26b3)
##########
superset/templates/superset/basic.html:
##########
@@ -50,7 +50,20 @@
{% endblock %}
{{ js_bundle(assets_prefix, 'theme') }}
+ <style>
+ .spinner svg {
+ --primary-color: rgb(72, 72, 72);
+ --accent-color: rgb(80, 165, 197);
Review Comment:
### Undocumented Color Variables <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Hardcoded RGB color values in CSS variables without explanation of their
purpose
###### Why this matters
Makes it difficult to understand the theming system and color choices when
modifying the spinner appearance
###### Suggested change ∙ *Feature Preview*
Add comments explaining the color usage:
```html
<style>
.spinner svg {
/* Default gray color for the dashed outline */
--primary-color: rgb(72, 72, 72);
/* Highlight blue color for the animated shape */
--accent-color: rgb(80, 165, 197);
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/ab356c2a-40f7-4c0e-a582-2c64d88492d3/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/ab356c2a-40f7-4c0e-a582-2c64d88492d3?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/ab356c2a-40f7-4c0e-a582-2c64d88492d3?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/ab356c2a-40f7-4c0e-a582-2c64d88492d3?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/ab356c2a-40f7-4c0e-a582-2c64d88492d3)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:9c952f89-cacd-4bec-bfd6-1ab518d1b2ee -->
[](9c952f89-cacd-4bec-bfd6-1ab518d1b2ee)
##########
superset/templates/superset/basic.html:
##########
@@ -50,7 +50,20 @@
{% endblock %}
{{ js_bundle(assets_prefix, 'theme') }}
+ <style>
+ .spinner svg {
+ --primary-color: rgb(72, 72, 72);
+ --accent-color: rgb(80, 165, 197);
+ overflow: visible;
+ }
+ .spinner {
+ padding: 10px;
+ width: 50px;
+ height: 50px;
+ overflow: visible;
+ }
+ </style>
Review Comment:
### Inline styles violate separation of concerns <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Inline styles are embedded directly in the HTML template instead of being
maintained in a separate CSS file
###### Why this matters
This makes the styles harder to maintain, reuse, and override. It also
violates separation of concerns principles by mixing presentation logic with
the HTML template.
###### Suggested change ∙ *Feature Preview*
Move the styles to a dedicated CSS file and include it using the existing
css_bundle mechanism:
```css
/* in a separate .css file */
.spinner svg {
--primary-color: rgb(72, 72, 72);
--accent-color: rgb(80, 165, 197);
overflow: visible;
}
.spinner {
padding: 10px;
width: 50px;
height: 50px;
overflow: visible;
}
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c7325a0a-333e-4ddb-8d98-511c60cd071f/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c7325a0a-333e-4ddb-8d98-511c60cd071f?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c7325a0a-333e-4ddb-8d98-511c60cd071f?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c7325a0a-333e-4ddb-8d98-511c60cd071f?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/c7325a0a-333e-4ddb-8d98-511c60cd071f)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:dced6775-f1d3-4174-b84d-b7ea37141dd8 -->
[](dced6775-f1d3-4174-b84d-b7ea37141dd8)
##########
superset/templates/superset/basic.html:
##########
@@ -63,16 +76,66 @@
{% block body %}
<div id="app" data-bootstrap="{{ bootstrap_data }}">
- <img
- src="{{ assets_prefix }}/static/assets/images/loading.gif"
- style="
- width: 50px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- "
- />
+ <div class="spinner">
+ <svg
+ viewBox="-36 -25 72 50"
+ xmlns="http://www.w3.org/2000/svg";
+ overflow="visible"
+ >
Review Comment:
### Missing Accessibility Attributes <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The SVG element is missing a role="img" attribute and aria-label, making it
inaccessible to screen readers.
###### Why this matters
Users relying on screen readers won't be notified that content is loading,
degrading the user experience for visually impaired users.
###### Suggested change ∙ *Feature Preview*
Add accessibility attributes to the SVG:
```html
<svg
viewBox="-36 -25 72 50"
xmlns="http://www.w3.org/2000/svg";
overflow="visible"
role="img"
aria-label="Loading content..."
>
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/e965076e-e37f-414d-a6a9-ebc53840aaf8/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/e965076e-e37f-414d-a6a9-ebc53840aaf8?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/e965076e-e37f-414d-a6a9-ebc53840aaf8?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/e965076e-e37f-414d-a6a9-ebc53840aaf8?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/e965076e-e37f-414d-a6a9-ebc53840aaf8)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:2d7c01e7-9b21-4a04-b6b9-2868909dd7d9 -->
[](2d7c01e7-9b21-4a04-b6b9-2868909dd7d9)
##########
superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx:
##########
@@ -38,28 +60,31 @@
display: block;
}
&.floating {
- padding: 0;
+ /* padding: 0; */
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
`;
-export function Loading({
- position = 'floating',
- image,
- className,
-}: LoadingProps) {
+export function Loading({ position = 'floating', className }: LoadingProps) {
+ const [svgContent, setSvgContent] = useState('');
+
+ useEffect(() => {
+ console.log('Loading SVG');
+ fetch('/static/assets/images/spinner.svg')
+ .then(response => response.text())
+ .then(htmlString => {
+ setSvgContent(htmlString);
+ });
Review Comment:
### Asset Loading Coupled to Component <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The Loading component fetches SVG content directly in the component,
violating separation of concerns and making the component tightly coupled to a
specific asset path.
###### Why this matters
This creates maintenance issues, reduces reusability, and makes testing more
difficult. The asset loading logic should be handled at a higher level or
through a dedicated service.
###### Suggested change ∙ *Feature Preview*
Create an asset service or move the SVG content to a separate module:
```typescript
// assets.ts
export const SpinnerSvg = `<svg>...</svg>`;
// Loading.tsx
import { SpinnerSvg } from './assets';
export function Loading({ position = 'floating', className }: LoadingProps) {
return (
<LoaderWrapper
className={cls('loading', position, className)}
dangerouslySetInnerHTML={{ __html: SpinnerSvg }}
/>
);
}
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91fd4cf4-64a4-4038-9740-c8d8aca84af0/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91fd4cf4-64a4-4038-9740-c8d8aca84af0?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91fd4cf4-64a4-4038-9740-c8d8aca84af0?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91fd4cf4-64a4-4038-9740-c8d8aca84af0?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91fd4cf4-64a4-4038-9740-c8d8aca84af0)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:9cb42202-3595-4bd0-a0a1-37f5618f7e34 -->
[](9cb42202-3595-4bd0-a0a1-37f5618f7e34)
##########
superset/templates/superset/basic.html:
##########
@@ -63,16 +76,66 @@
{% block body %}
<div id="app" data-bootstrap="{{ bootstrap_data }}">
- <img
- src="{{ assets_prefix }}/static/assets/images/loading.gif"
- style="
- width: 50px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- "
- />
+ <div class="spinner">
+ <svg
+ viewBox="-36 -25 72 50"
+ xmlns="http://www.w3.org/2000/svg";
+ overflow="visible"
+ >
+ <defs>
+ <filter id="shadow1" x="-50%" y="-50%" width="200%" height="200%">
+ <feDropShadow
+ dx="1"
+ dy="1"
+ stdDeviation="2"
+ flood-color="rgba(0,0,0,0.3)"
+ />
+ </filter>
+ <path
+ id="morphPath"
+ d="M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7 -22,-0
-22,-8.7 -7,-16 0,0 Z"
+ stroke-width="7"
+ fill="transparent"
+ filter="url(#shadow1)"
+ >
+ <animate
+ attributeName="d"
+ dur="8s"
+ repeatCount="indefinite"
+ values="M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7
-22,-0 -22,-8.7 -7,-16 0,0 Z;
+ M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7 -22,-0
-22,-8.7 -7,-16 0,0 Z;
+ M 0,-16 C 8.7,-16 16,-8.7 16,0 16,8.7 8.7,16 0,16 -8.7,16
-16,8.7 -16,-0 -16,-8.7 -8.7,-16 0,-16 Z;
+ M 0,-16 C 8.7,-16 16,-8.7 16,0 16,8.7 8.7,16 0,16 -8.7,16
-16,8.7 -16,-0 -16,-8.7 -8.7,-16 0,-16 Z;
+ M 0,0 C 7,-16 22,-8.7 22,0 22,8.7 7,16 0,0 -7,-16 -22,-8.7 -22,0
-22,8.7 -7,16 0,0 Z;
+ M 0,0 C 7,-16 22,-8.7 22,0 22,8.7 7,16 0,0 -7,-16 -22,-8.7 -22,0
-22,8.7 -7,16 0,0 Z;
+ M 0,16 C 8.7,16 16,8.7 16,0 16,-8.7 8.7,-16 0,-16 -8.7,-16
-16,-8.7 -16,0 -16,8.7 -8.7,16 0,16 Z;
+ M 0,16 C 8.7,16 16,8.7 16,0 16,-8.7 8.7,-16 0,-16 -8.7,-16
-16,-8.7 -16,0 -16,8.7 -8.7,16 0,16 Z;
+ M 0,0 C 7,16 22,8.7 22,0 22,-8.7 7,-16 0,0 -7,16 -22,8.7 -22,-0
-22,-8.7 -7,-16 0,0 Z"
+ keyTimes="0;0.1;0.2;0.4;0.5;0.6;0.7;0.9;1"
+ />
+ </path>
+ </defs>
+ <!-- First path with morphing animation -->
+ <use href="#morphPath" stroke="var(--accent-color, currentColor)" />
+
+ <!-- Second (repeated) path with dash animation -->
+ <use
+ href="#morphPath"
+ stroke="var(--primary-color, inherit)"
+ stroke-dasharray="108 10"
Review Comment:
### Unexplained SVG Dash Values <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Magic numbers used in SVG stroke-dasharray without explanation of their
visual effect
###### Why this matters
Makes it difficult to maintain or adjust the dashed line pattern without
understanding the meaning of these specific values
###### Suggested change ∙ *Feature Preview*
Add a comment explaining the dash pattern:
```html
<!-- Create dashed effect with 108px dash and 10px gap -->
<use
href="#morphPath"
stroke="var(--primary-color, inherit)"
stroke-dasharray="108 10"
>
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/071cff02-f236-4609-b869-044a4b69bb0f/upvote)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/071cff02-f236-4609-b869-044a4b69bb0f?what_not_true=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/071cff02-f236-4609-b869-044a4b69bb0f?what_out_of_scope=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/071cff02-f236-4609-b869-044a4b69bb0f?what_not_in_standard=true)
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/071cff02-f236-4609-b869-044a4b69bb0f)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:0abc235b-46fd-4356-aa93-e648a6d32c37 -->
[](0abc235b-46fd-4356-aa93-e648a6d32c37)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
