Introduce new Spinner component

CHANGELOG.md

@@ -8,6 +8,7 @@
 - add window titlebar for html_email- and help window #3770 #3778
 - add quick key `Cmd+W`/`Ctrl+W` to close webxdc-, html_email- and help-window #3770 #3778
 - Accept images from clipboard in QR reader #3762
+- Introduce new `Spinner` component #3786
 
 ### Changed
 - Update translations (2024-04-04) #3746

src/renderer/components/QrReader/index.tsx

@@ -7,9 +7,9 @@ import React, {
 } from 'react'
 import scanQrCode from 'jsqr'
 import classNames from 'classnames'
-import { Spinner } from '@blueprintjs/core'
 
 import Icon from '../Icon'
+import Spinner from '../Spinner'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 import { ContextMenuContext } from '../../contexts/ContextMenuContext'
 import { ScreenContext } from '../../contexts/ScreenContext'

src/renderer/components/Spinner/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import styles from './styles.module.scss'
+
+type Props = {
+  size?: number
+}
+
+export default function Spinner({ size = 50 }: Props) {
+  return <div style={{ width: `${size}px` }} className={styles.spinner} />
+}

src/renderer/components/Spinner/styles.module.scss

@@ -0,0 +1,18 @@
+@keyframes spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.spinner {
+  aspect-ratio: 1;
+  background: var(--colorPrimary);
+  border-radius: 50%;
+  padding: 8px;
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: spin 1.5s infinite linear;
+}