[ts][webcomponents] no-spinner to spinner, and reversed logic. Default is not having the spinner.

spine-ts/spine-webcomponents/example/tutorial.html

@@ -1334,22 +1334,20 @@ function removeDiv() {
                     atlas="/assets/spineboy-pma.atlas"
                     skeleton="/assets/spineboy-pro.skel"
                     animation="walk"
-                    no-spinner
+                    spinner
                 ></spine-skeleton>
             </div>
             <div class="split-right">
-                A loading spinner is shown while assets are loading. Click the button below to simulate a 2-second loading delay:
+                If you want to show loading spinner while assets are loading, set the <code>spinner</code> attribute. Click the button below to simulate a 2-second loading delay:
                 <br>
                 <br>
                 <input type="button" value="Simulate reload" onclick="reloadWidget(this)">
                 <br>
                 <br>
-                If you don't want to show the loading spinner, set <code>no-spinner</code>.
-                <br>
                 Click the button below to toggle the spinner.
                 <br>
                 <br>
-                <input type="button" value="Spinner OFF" onclick="toggleSpinner(this)">
+                <input type="button" value="Spinner ON" onclick="toggleSpinner(this)">
             </div>
         </div>
 
@@ -1365,8 +1363,8 @@ function removeDiv() {
                 }, 1000)
             }
             function toggleSpinner(element) {
-                widget.noSpinner = !widget.noSpinner;
+                widget.spinner = !widget.spinner;
-                element.value = widget.noSpinner ? "Spinner OFF" : "Spinner ON";
+                element.value = widget.spinner ? "Spinner ON" : "Spinner OFF";
             }
         </script>
 
@@ -1379,7 +1377,7 @@ function removeDiv() {
     atlas="/assets/spineboy-pma.atlas"
     skeleton="/assets/spineboy-pro.skel"
     animation="walk"
-    no-spinner
+    spinner
 ></spine-skeleton>
 <input type="button" value="Simulate reload" onclick="reloadWidget(this)">
 <input type="button" value="Spinner ON" onclick="toggleSpinner(this)">
@@ -1398,8 +1396,8 @@ async function reloadWidget(element) {
     }, 1000)
 }
 function toggleSpinner(element) {
-    widget.noSpinner = !widget.noSpinner;
+    widget.spinner = !widget.spinner;
-    element.value = widget.noSpinner ? "Spinner ON" : "Spinner OFF";
+    element.value = widget.spinner ? "Spinner ON" : "Spinner OFF";
 }`)
                 </script>
             </code></pre>

spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts

@@ -483,7 +483,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 			const tempVector = new Vector3();
 			for (const widget of this.widgets) {
-				const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, noSpinner, loading, clip, drag } = widget;
+				const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, spinner, loading, clip, drag } = widget;
 
 				if (widget.isOffScreenAndWasMoved()) continue;
 				const elementRef = widget.getHostElement();
@@ -516,7 +516,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 				if (clip) startScissor(divBounds);
 
 				if (loading) {
-					if (!noSpinner) {
+					if (spinner) {
 						if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer);
 						widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY);
 					}

spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -104,7 +104,7 @@ interface WidgetAttributes {
 	pages?: Array<number>
 	clip: boolean
 	offScreenUpdateBehaviour: OffScreenUpdateBehaviourType
-	noSpinner: boolean
+	spinner: boolean
 }
 
 // The methods user can override to have custom behaviour
@@ -531,10 +531,10 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	public offScreenUpdateBehaviour: OffScreenUpdateBehaviourType = "pause";
 
 	/**
-	 * If false (default), a Spine loading spinner is shown during asset loading
+	 * If true, a Spine loading spinner is shown during asset loading. Default to false.
-	 * Connected to `no-spinner` attribute.
+	 * Connected to `spinner` attribute.
 	 */
-	public noSpinner = false;
+	public spinner = false;
 
 	/**
 	 * Replace the default state and skeleton update logic for this widget.
@@ -599,7 +599,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	/**
 	 * The {@link LoadingScreenWidget} of this widget.
 	 * This is instantiated only if it is really necessary.
-	 * For example, if {@link noSpinner} is `false`, this property value is null
+	 * For example, if {@link spinner} is `false`, this property value is null
 	 */
 	public loadingScreen: LoadingScreen | null = null;
 
@@ -718,7 +718,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 		debug: { propertyName: "debug", type: "boolean" },
 		"manual-start": { propertyName: "manualStart", type: "boolean" },
 		"start-when-visible": { propertyName: "startWhenVisible", type: "boolean" },
-		"no-spinner": { propertyName: "noSpinner", type: "boolean" },
+		"spinner": { propertyName: "spinner", type: "boolean" },
 		clip: { propertyName: "clip", type: "boolean" },
 		pages: { propertyName: "pages", type: "array-number" },
 		fit: { propertyName: "fit", type: "fitType", defaultValue: "contain" },