WIP: Templatizing SVG spinner #33782

rusackas · 2025-06-16T19:03:57Z

SUMMARY

Just a sketch to show reusing the SVG spinner animation in jinja AND in the Loader component.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

…back

…ates are flushed before assertions

…async updates after test end

…meout for "can modify columns" test

…ing (#33780)

rusackas · 2025-06-16T19:06:17Z

superset/templates/superset/basic.html

-            transform: translate(-50%, -50%);
-          "
-        />
+      <div class="spinner">


Oops... I thought I already pulled in the SVG code here from the actual SVG file, rather than duplicating the code.

This could basically be replaced by
{{ include('path/to/spinner.svg') }} I think.

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Undocumented Color Variables ▹ view	🧠 Incorrect
	Redundant Animation Keyframes ▹ view	🧠 Incorrect
	Debug Statement in Production ▹ view	🧠 Incorrect
	Remove commented-out code ▹ view	🧠 Not in scope
	Missing Accessibility Attributes ▹ view	🧠 Not in standard
	Asset Loading Coupled to Component ▹ view	🧠 Incorrect
	Inefficient Animation Duration ▹ view	🧠 Not in standard
	Inline styles violate separation of concerns ▹ view	🧠 Not in standard
	Unexplained SVG Dash Values ▹ view	🧠 Incorrect
	Unsanitized SVG Content Injection ▹ view	🧠 Not in standard

Files scanned

File Path	Reviewed
superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx	✅
superset/templates/superset/basic.html	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

superset/templates/superset/basic.html

+            <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;


superset/templates/superset/basic.html

+              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;


superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx

+  const [svgContent, setSvgContent] = useState('');
+
+  useEffect(() => {
+    console.log('Loading SVG');


superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx

@@ -38,28 +60,31 @@
    display: block;
  }
  &.floating {
-    padding: 0;
+    /* padding: 0; */


superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx

-      aria-label="Loading"
-      data-test="loading-indicator"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: svgContent }}


superset/templates/superset/basic.html

+    <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>


superset/templates/superset/basic.html

+        --primary-color: rgb(72, 72, 72);
+        --accent-color: rgb(80, 165, 197);


superset/templates/superset/basic.html

+        <use
+          href="#morphPath"
+          stroke="var(--primary-color, inherit)"
+          stroke-dasharray="108 10"


superset/templates/superset/basic.html

+        <svg
+        viewBox="-36 -25 72 50"
+        xmlns="http://www.w3.org/2000/svg"
+        overflow="visible"
+      >


superset-frontend/packages/superset-ui-core/src/components/Loading/index.tsx

+    fetch('/static/assets/images/spinner.svg')
+      .then(response => response.text())
+      .then(htmlString => {
+        setSvgContent(htmlString);
+      });


mistercrunch added 30 commits March 17, 2025 13:55

feat: messing with the theme

336763f

make Cancel secondary

352aa36

adjusting some buttons

8d36120

fix types/tests

ac81eef

fix unit test

b2b7b89

ts-ignore

22cbec1

fix a few buttons

d131c29

make secondary filled/primary

b575aa6

fix dashboard left panel background-color

6b5d53a

fixing storybook

d15c6d3

set DARK ff to false

4b55a92

switch primary color, keep old hex as comment in case we want to roll…

5faf018

…back

rebased

Loading
Loading status checks…

dbc7db9

echarts

2d461de

fix treemap

7dbe05f

fix sankey theme

f16600e

fix BIG number

48df49d

fixing vizes

83f47d3

minor progress

2f80ebb

merging

Loading
Loading status checks…

e0d86df

fix MoreOutlined button background

b9be692

color

9cb6c3b

more button background

1ca0f34

echarts theming

Loading
Loading status checks…

11bc496

Merge branch 'master' into template_less

b7bc111

some theming fixes

Loading
Loading status checks…

358633e

touchups

31eb105

Merge branch 'master' into template_less

Loading
Loading status checks…

4afbfd1

fix CopyOutlined icon in dataset view to align with sizing

8ce1449

theme toast icons and various cosmetic updates

56e3d16

EnxDev and others added 13 commits June 8, 2025 12:56

refactor(Input Story): enhance type integration

0cacaba

refactor(UserInfo test): wrap render in await act to ensure state upd…

1eb65ec

…ates are flushed before assertions

fix(RTL test): await asyncRender in DataSourceEditor.test to prevent …

33b069a

…async updates after test end

Merge branch 'master' into template_less

56089aa

fix(DatasourceEditor): clear mocks

72fc7ac

fix(e2e): increase timeout

fa88197

Merge branch master into template_less

96d7209

refactor(DataSourceEditor tests): remove unused await and increase ti…

ae98d5f

…meout for "can modify columns" test

fix(theming): Fix visual regressions from theming P4 (#33703)

253a72f

refactor(theming): Remove direct imports of supersetTheme (#33770)

1be1ca1

feat(theming): implement a ThemeController (#33420)

0a07520

fix(BaseIcon): Ensure iconSize is parsed correctly when passed as str…

45a032a

…ing (#33780)

templatizing spinner

bbd19f9

pull-request-size bot added the size/L label Jun 16, 2025

github-actions bot added the packages label Jun 16, 2025

dosubot bot added the global:jinja label Jun 16, 2025

rusackas commented Jun 16, 2025

View reviewed changes

korbit-ai bot reviewed Jun 16, 2025

View reviewed changes

Base automatically changed from template_less to master June 20, 2025 20:39

mistercrunch requested review from villebro, geido, eschutho, betodealmeida, nytai, mistercrunch, craig-rueda, kgabryje, dpgaspar, sadpandajoe and michael-s-molina as code owners June 20, 2025 20:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

WIP: Templatizing SVG spinner #33782

WIP: Templatizing SVG spinner #33782

rusackas commented Jun 16, 2025

Uh oh!

rusackas Jun 16, 2025

Uh oh!

rusackas Jun 16, 2025

Uh oh!

korbit-ai bot left a comment •

edited

Loading

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

		--primary-color: rgb(72, 72, 72);
		--accent-color: rgb(80, 165, 197);

WIP: Templatizing SVG spinner #33782

Are you sure you want to change the base?

WIP: Templatizing SVG spinner #33782

Conversation

rusackas commented Jun 16, 2025

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rusackas Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

rusackas Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

korbit-ai bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

korbit-ai bot left a comment •

edited

Loading