style(LoadingButton): 💄 Migliorato CSS inline del LoadingButton

package.json

@@ -80,6 +80,7 @@
         "autoprefixer": "^10.4.0",
         "babel-plugin-transform-flow-enums": "^0.0.2",
         "concurrently": "^6.4.0",
+        "csstype": "^3.0.10",
         "eslint": "^7.32.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-flowtype": "^8.0.3",

pnpm-lock.yaml

@@ -55,6 +55,7 @@ specifiers:
   collect.js: ^4.29.3
   coloquent: ^2.4.0
   concurrently: ^6.4.0
+  csstype: ^3.0.10
   eslint: ^7.32.0
   eslint-config-airbnb-base: ^15.0.0
   eslint-plugin-flowtype: ^8.0.3
@@ -161,6 +162,7 @@ devDependencies:
   autoprefixer: 10.4.0_postcss@8.4.4
   babel-plugin-transform-flow-enums: 0.0.2_@babel+core@7.16.0
   concurrently: 6.4.0
+  csstype: 3.0.10
   eslint: 7.32.0
   eslint-config-airbnb-base: 15.0.0_a820dc868cc8cd66d8297be6779b9035
   eslint-plugin-flowtype: 8.0.3_f352da6f9c36c27d4e75da053be5baab
@@ -3238,6 +3240,10 @@ packages:
     hasBin: true
     dev: true
 
+  /csstype/3.0.10:
+    resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
+    dev: true
+
   /damerau-levenshtein/1.0.7:
     resolution: {integrity: sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==}
     dev: true

resources/js/Components/LoadingButton.jsx

@@ -5,6 +5,7 @@ import {type ClassComponent} from 'mithril';
 
 import Component from './Component.jsx';
 import Mdi from './Mdi.jsx';
+import type CSS from 'csstype';
 
 export default class LoadingButton extends Component implements ClassComponent<Button> {
   view(vnode) {
@@ -14,7 +15,7 @@ export default class LoadingButton extends Component implements ClassComponent<B
         <span slot="icon" style="display: inline;">
             <mwc-circular-progress
               indeterminate
-              style={`display: none; vertical-align: bottom; ${this.attrs.has('raised') ? '--mdc-theme-primary: #ffffff;' : ''}'`}/>
+              style={this.getCSSProperties()}/>
           {this.attrs.has('icon') ? <Mdi icon={this.attrs.get('icon')}/> : ''}
         </span>
         </mwc-button>
@@ -22,6 +23,23 @@ export default class LoadingButton extends Component implements ClassComponent<B
     );
   }
 
+  getCSSProperties() {
+    const css: CSS.Properties<> = {
+      display: 'none',
+      verticalAlign: 'bottom'
+    };
+
+    if (this.attrs.has('raised')) {
+      css['--mdc-theme-primary'] = '#ffffff';
+    }
+
+    if (this.attrs.has('icon')) {
+      css.marginRight = '8px';
+    }
+
+    return css;
+  }
+
   oncreate(vnode) {
     super.oncreate(vnode);
     $(this.element)