From daafde24b039bfde94e1d7fb3efebaf11eab527a Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 19 Feb 2026 02:51:05 +0100
Subject: [PATCH] refactor(package/ui): os-spinner (#9245)

---
 packages/ui/PROJEKT.md                        |  66 ++++-
 .../ui/src/components/OsButton/OsButton.vue   |  49 +--
 .../components/OsButton/button.variants.ts    |   3 +
 packages/ui/src/components/OsButton/index.ts  |   2 +-
 .../components/OsSpinner/OsSpinner.spec.ts    | 149 ++++++++++
 .../components/OsSpinner/OsSpinner.stories.ts | 113 +++++++
 .../OsSpinner/OsSpinner.visual.spec.ts        | 101 +++++++
 .../ui/src/components/OsSpinner/OsSpinner.vue | 120 ++++++++
 .../__screenshots__/chromium/all-sizes.png    | Bin 0 -> 6305 bytes
 .../chromium/inherit-color.png                | Bin 0 -> 4208 bytes
 .../__screenshots__/chromium/inline-text.png  | Bin 0 -> 7997 bytes
 packages/ui/src/components/OsSpinner/index.ts |   2 +
 .../components/OsSpinner/spinner.variants.ts  |  13 +
 packages/ui/src/components/index.ts           |   3 +-
 packages/ui/src/types.d.ts                    |  12 +-
 webapp/Dockerfile                             |   5 +-
 webapp/Dockerfile.maintenance                 |   5 +-
 webapp/components/Uploader/ImageUploader.vue  |   7 +-
 .../LoadingSpinner/LoadingSpinner.story.js    |  11 -
 .../generic/LoadingSpinner/LoadingSpinner.vue |  48 ---
 webapp/pages/admin/index.vue                  |  91 +++---
 .../_id/__snapshots__/_slug.spec.js.snap      | 280 ++++++++++++++----
 webapp/pages/groups/_id/_slug.vue             |  13 +-
 webapp/pages/index.vue                        |   7 +-
 .../_id/__snapshots__/_slug.spec.js.snap      | 112 +++++--
 webapp/pages/profile/_id/_slug.vue            |  13 +-
 26 files changed, 976 insertions(+), 249 deletions(-)
 create mode 100644 packages/ui/src/components/OsSpinner/OsSpinner.spec.ts
 create mode 100644 packages/ui/src/components/OsSpinner/OsSpinner.stories.ts
 create mode 100644 packages/ui/src/components/OsSpinner/OsSpinner.visual.spec.ts
 create mode 100644 packages/ui/src/components/OsSpinner/OsSpinner.vue
 create mode 100644 packages/ui/src/components/OsSpinner/__screenshots__/chromium/all-sizes.png
 create mode 100644 packages/ui/src/components/OsSpinner/__screenshots__/chromium/inherit-color.png
 create mode 100644 packages/ui/src/components/OsSpinner/__screenshots__/chromium/inline-text.png
 create mode 100644 packages/ui/src/components/OsSpinner/index.ts
 create mode 100644 packages/ui/src/components/OsSpinner/spinner.variants.ts
 delete mode 100644 webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js
 delete mode 100644 webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue

diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md
index 874b40636..4ff7c5493 100644
--- a/packages/ui/PROJEKT.md
+++ b/packages/ui/PROJEKT.md
@@ -81,10 +81,10 @@ Phase 0: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 1: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 2: ██████████ 100% (26/26 Aufgaben) ✅
 Phase 3: ██████████ 100% (24/24 Aufgaben) ✅ - Webapp-Integration komplett
-Phase 4: ██░░░░░░░░  24% (4/17 Aufgaben) - OsButton ✅, OsIcon ✅, System-Icons ✅, BaseIcon→OsIcon Migration ✅
+Phase 4: ████░░░░░░  35% (6/17 Aufgaben) - OsButton ✅, OsIcon ✅, System-Icons ✅, BaseIcon→OsIcon Migration ✅, OsSpinner ✅, Spinner Webapp-Migration ✅
 Phase 5: ░░░░░░░░░░   0% (0/7 Aufgaben)
 ───────────────────────────────────────
-Gesamt:  ████████░░  77% (66/86 Aufgaben)
+Gesamt:  ████████░░  79% (68/86 Aufgaben)
 ```
 
 ### Katalogisierung (Details in KATALOG.md)
@@ -133,6 +133,25 @@ System-Icons:
 Ocelot-Icons (separates Entry-Point):
 └─ 82 Icons (Feature-Icons + Kategorie-Icons aus Webapp migriert)
 
+OsSpinner:
+├─ size:       ✅ xs, sm, md, lg, xl, 2xl (em-basiert)
+├─ color:      ✅ currentColor (erbt von Parent)
+├─ a11y:       ✅ role="status", aria-label="Loading" (customizable)
+├─ decorative: ✅ aria-hidden="true" suppresses role/aria-label
+├─ os-button:  ✅ OsButton nutzt OsSpinner als Komponente (decorative)
+├─ vue-compat: ✅ h() Render-Function mit isVue2
+└─ webapp:     ✅ 4 Spinner migriert (DsSpinner + LoadingSpinner → OsSpinner)
+
+DsSpinner/LoadingSpinner → OsSpinner Webapp-Migration: ✅
+├─ ImageUploader.vue: LoadingSpinner → OsSpinner (size="lg")
+├─ pages/profile: ds-spinner → os-spinner (size="lg")
+├─ pages/groups: ds-spinner → os-spinner (size="lg")
+├─ pages/admin: ds-spinner → os-spinner (size="xl") + ApolloQuery→apollo Option
+├─ LoadingSpinner Komponente gelöscht
+├─ ds-space centered → div+padding (Bugfix in 3 Seiten)
+├─ Admin: ApolloQuery→$apollo.loading (Spinner war wg. SSR-Prefetch unsichtbar)
+└─ infinite-loading: OsSpinner im spinner-Slot (index, profile, groups)
+
 BaseIcon → OsIcon Webapp-Migration: ✅
 ├─ 131 <base-icon> in 70+ Dateien → <os-icon :icon="...">
 ├─ 82 SVGs in ocelot/icons/svgs/ (inkl. 17 Kategorie-Icons)
@@ -147,11 +166,35 @@ BaseIcon → OsIcon Webapp-Migration: ✅
 
 ## Aktueller Stand
 
-**Letzte Aktualisierung:** 2026-02-15 (Session 22)
+**Letzte Aktualisierung:** 2026-02-18 (Session 24)
 
-**Aktuelle Phase:** Phase 4 - OsIcon ✅, BaseIcon → OsIcon Webapp-Migration ✅
+**Aktuelle Phase:** Phase 4 - OsIcon ✅, BaseIcon → OsIcon Migration ✅, OsSpinner ✅, Spinner Webapp-Migration ✅
 
-**Zuletzt abgeschlossen (Session 22 - BaseIcon → OsIcon Webapp-Migration):**
+**Zuletzt abgeschlossen (Session 24 - OsSpinner Webapp-Migration + Refactoring):**
+- [x] OsButton refactored: nutzt `h(OsSpinner, { 'aria-hidden': 'true' })` statt Inline-SVG
+- [x] OsSpinner: Decorative-Modus (`aria-hidden="true"` unterdrückt role/aria-label)
+- [x] `ButtonSize` Type exportiert (sm/md/lg/xl), `types.d.ts` Kommentar aktualisiert
+- [x] `createSpinnerSvg.ts` wieder in OsSpinner.vue inlined (nur noch 1 Nutzer)
+- [x] Webapp-Migration: 4 Spinner ersetzt (ImageUploader, profile, groups, admin)
+- [x] LoadingSpinner Komponente gelöscht (ersetzt durch OsSpinner)
+- [x] `<ds-space centered>` → `<div style="...">` Bugfix in 3 Seiten
+- [x] Admin-Seite: `<ApolloQuery>` → `apollo`-Option + `$apollo.loading` (Spinner war wg. SSR-Prefetch unsichtbar)
+- [x] `filterStatistics()` mutiert nicht mehr Originalobjekt (Destructuring statt `delete`)
+- [x] `infinite-loading` Spinner-Slot: OsSpinner in allen 3 Nutzungen (index, profile, groups)
+- [x] Einheitliches Spinner-Design: vue-infinite-loading Default-Spinner → OsSpinner
+
+**Zuvor abgeschlossen (Session 23 - OsSpinner Komponente):**
+- [x] OsSpinner Komponente implementiert (size prop, currentColor, role="status", aria-label)
+- [x] Vue 2/3 kompatibel via `h()` Render-Function mit `isVue2`
+- [x] Storybook Stories: Playground, AllSizes, InheritColor, InlineWithText
+- [x] Unit Tests: 23 Tests (rendering, size, accessibility, decorative mode, css, keyboard)
+- [x] Visual Tests: 4 Tests (all-sizes, inherit-color, inline-text, keyboard a11y)
+- [x] Accessibility: `role="status"`, `aria-label="Loading"` (customizable), axe-core checks
+- [x] 100% Test-Coverage (Statements, Branches, Functions, Lines)
+- [x] Completeness Check bestanden
+- [x] OsButton Visual Tests: 19/19 bestanden (kein Regression durch Refactoring)
+
+**Zuvor abgeschlossen (Session 22 - BaseIcon → OsIcon Webapp-Migration):**
 - [x] 131 `<base-icon>` Nutzungen in 70+ Dateien → `<os-icon :icon="icons.xxx">` migriert
 - [x] 82 Ocelot-Icons in `packages/ui/src/ocelot/icons/svgs/` (von 1 auf 82)
 - [x] 17 Kategorie-Icons aus Webapp kopiert (networking, energy, psyche, movement, finance, child, mobility, shopping-cart, peace, politics, nature, science, health, media, spirituality, culture, miscellaneous)
@@ -219,7 +262,7 @@ BaseIcon → OsIcon Webapp-Migration: ✅
 - [x] Session 11: Wasserfarben-Farbschema, Stories konsolidiert, Keyboard A11y
 
 **Nächste Schritte:**
-- [ ] OsSpinner Komponente (vereint DsSpinner + LoadingSpinner)
+- [x] OsSpinner Webapp-Migration (DsSpinner + LoadingSpinner → OsSpinner) ✅
 - [ ] OsCard Komponente (vereint DsCard + BaseCard)
 - [ ] Weitere Tier 1 Komponenten
 - [ ] Browser-Fehler untersuchen: `TypeError: Cannot read properties of undefined (reading 'heartO')` (ocelotIcons undefined im Browser trotz korrekter Webpack-Aliase)
@@ -473,7 +516,8 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ
 
 **Tier 1: Kern-Komponenten**
 - [x] OsIcon (vereint DsIcon + BaseIcon) ✅ System-Icons + vite-svg-icon Plugin
-- [ ] OsSpinner (vereint DsSpinner + LoadingSpinner)
+- [x] OsSpinner (vereint DsSpinner + LoadingSpinner) ✅ OsButton nutzt OsSpinner als Komponente
+- [x] OsSpinner Webapp-Migration ✅ 4 Spinner migriert, LoadingSpinner gelöscht, Admin ApolloQuery→$apollo.loading
 - [x] OsButton (vereint DsButton + BaseButton) ✅ Entwickelt in Phase 2
 - [ ] OsCard (vereint DsCard + BaseCard)
 
@@ -1577,6 +1621,14 @@ Bei der Migration werden:
 | 2026-02-15 | **8 Snapshots gelöscht** | Stale Snapshot-Dateien entfernt nach BaseIcon → OsIcon Migration |
 | 2026-02-15 | **CSS Migration** | `.base-icon` → `.os-icon` in main.scss und Category/index.vue |
 | 2026-02-15 | **Jest Mock ocelot** | `test/__mocks__/@ocelot-social/ui/ocelot.js` für ocelotIcons in Jest-Umgebung |
+| 2026-02-18 | **OsSpinner Komponente** | Neue Komponente: size (xs-2xl, em-basiert), currentColor, role="status", aria-label; Vue 2/3 via h() + isVue2 |
+| 2026-02-18 | **OsSpinner Decorative** | `aria-hidden="true"` unterdrückt role/aria-label; OsButton nutzt OsSpinner als Komponente (decorative) |
+| 2026-02-18 | **ButtonSize Type** | `ButtonSize` (sm/md/lg/xl) exportiert aus button.variants.ts; types.d.ts Kommentar: Size ist Vokabular, nicht Pflicht |
+| 2026-02-18 | **OsSpinner Webapp-Migration** | 4 Stellen migriert: ImageUploader, profile, groups, admin; LoadingSpinner gelöscht |
+| 2026-02-18 | **ds-space centered Bugfix** | `<ds-space centered>` → `<div style="text-align:center;padding:48px 0">` in 3 Seiten (Styleguide-Bug) |
+| 2026-02-18 | **Admin Spinner Fix** | `<ApolloQuery>` → `apollo`-Option + `$apollo.loading`; SSR-Prefetch verhinderte Loading-State im Client |
+| 2026-02-18 | **filterStatistics Fix** | `delete data.__typename` → Destructuring `{ __typename, ...rest }` (keine Mutation des Originalobjekts) |
+| 2026-02-18 | **infinite-loading Spinner-Slot** | OsSpinner im `spinner`-Slot von vue-infinite-loading in 3 Seiten (index, profile, groups); einheitliches Spinner-Design |
 
 ---
 
diff --git a/packages/ui/src/components/OsButton/OsButton.vue b/packages/ui/src/components/OsButton/OsButton.vue
index e85c268bd..98899ff98 100644
--- a/packages/ui/src/components/OsButton/OsButton.vue
+++ b/packages/ui/src/components/OsButton/OsButton.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { computed, defineComponent, getCurrentInstance, h, isVue2 } from 'vue-demi'
 
+  import OsSpinner from '#src/components/OsSpinner/OsSpinner.vue'
   import { cn } from '#src/utils'
 
   import { buttonVariants } from './button.variants'
 
-  import type { ButtonVariants } from './button.variants'
+  import type { ButtonSize, ButtonVariants } from './button.variants'
   import type { Component, PropType } from 'vue-demi'
 
   /**
@@ -24,9 +25,7 @@
    * @slot suffix - Optional trailing content (rendered right of text). Icons, badges, chevrons etc.
    */
 
-  type Size = NonNullable<ButtonVariants['size']>
-
-  const CIRCLE_WIDTHS: Record<Size, string> = {
+  const CIRCLE_WIDTHS: Record<ButtonSize, string> = {
     sm: 'w-[26px]',
     md: 'w-[36px]',
     lg: 'w-12',
@@ -38,42 +37,14 @@
   const ICON_CLASS = `os-button__icon ${SLOT_BASE}`
   const SUFFIX_CLASS = `os-button__suffix ${SLOT_BASE}`
 
-  const SPINNER_PX: Record<Size, number> = { sm: 24, md: 32, lg: 40, xl: 46 }
-
-  const SVG_ATTRS = {
-    viewBox: '0 0 50 50',
-    xmlns: 'http://www.w3.org/2000/svg',
-    'aria-hidden': 'true',
-  }
-
-  const CIRCLE_ATTRS = {
-    cx: '25',
-    cy: '25',
-    r: '20',
-    fill: 'none',
-    stroke: 'currentColor',
-    'stroke-width': '4',
-    'stroke-linecap': 'round',
-  }
-
-  const CIRCLE_STYLE =
-    'transform-origin:25px 25px;animation:os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite'
-
-  function vueAttrs(attrs: Record<string, string>, style?: string) {
-    /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */
-    return isVue2 ? { attrs, ...(style && { style }) } : { ...attrs, ...(style && { style }) }
-    /* v8 ignore stop */
-  }
+  const SPINNER_PX: Record<ButtonSize, number> = { sm: 24, md: 32, lg: 40, xl: 46 }
 
   function createSpinner(px: number, center: string) {
-    const svg = h('svg', vueAttrs(SVG_ATTRS, 'width:100%;height:100%;overflow:hidden'), [
-      h('circle', vueAttrs(CIRCLE_ATTRS, CIRCLE_STYLE)),
-    ])
-    return h(
-      'span',
-      { class: `os-button__spinner absolute ${center}`, style: `width:${px}px;height:${px}px` },
-      [svg],
-    )
+    return h(OsSpinner, {
+      class: `os-button__spinner absolute ${center}`,
+      style: `width:${px}px;height:${px}px`,
+      'aria-hidden': 'true',
+    })
   }
 
   export default defineComponent({
@@ -148,7 +119,7 @@
             return typeof children !== 'string' || children.trim().length > 0
           }) ?? false
 
-        const size = props.size as Size
+        const size = props.size as ButtonSize
         const spinnerPx = SPINNER_PX[size] // eslint-disable-line security/detect-object-injection
         const isSmall = props.circle || size === 'sm'
         const isLoading = props.loading
diff --git a/packages/ui/src/components/OsButton/button.variants.ts b/packages/ui/src/components/OsButton/button.variants.ts
index 2d694e93d..ac4050acb 100644
--- a/packages/ui/src/components/OsButton/button.variants.ts
+++ b/packages/ui/src/components/OsButton/button.variants.ts
@@ -269,3 +269,6 @@ export const buttonVariants = cva(
 )
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+/** Button-specific size subset: sm | md | lg | xl */
+export type ButtonSize = NonNullable<ButtonVariants['size']>
diff --git a/packages/ui/src/components/OsButton/index.ts b/packages/ui/src/components/OsButton/index.ts
index 45a4b35d4..abf15497d 100644
--- a/packages/ui/src/components/OsButton/index.ts
+++ b/packages/ui/src/components/OsButton/index.ts
@@ -1,2 +1,2 @@
 export { default as OsButton } from './OsButton.vue'
-export { buttonVariants, type ButtonVariants } from './button.variants'
+export { buttonVariants, type ButtonSize, type ButtonVariants } from './button.variants'
diff --git a/packages/ui/src/components/OsSpinner/OsSpinner.spec.ts b/packages/ui/src/components/OsSpinner/OsSpinner.spec.ts
new file mode 100644
index 000000000..610bc199c
--- /dev/null
+++ b/packages/ui/src/components/OsSpinner/OsSpinner.spec.ts
@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import OsSpinner from './OsSpinner.vue'
+import { SPINNER_SIZES } from './spinner.variants'
+
+import type { Size } from '#src/types'
+
+describe('osSpinner', () => {
+  describe('rendering', () => {
+    it('renders a spinner element', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.find('.os-spinner').exists()).toBe(true)
+    })
+
+    it('renders an SVG circle', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.find('svg').exists()).toBe(true)
+      expect(wrapper.find('circle').exists()).toBe(true)
+    })
+
+    it('renders as span element', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('SPAN')
+    })
+
+    it('svg has correct viewBox', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 50 50')
+    })
+
+    it('circle uses currentColor for stroke', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.find('circle').attributes('stroke')).toBe('currentColor')
+    })
+
+    it('circle has animation style', () => {
+      const wrapper = mount(OsSpinner)
+      const style = wrapper.find('circle').attributes('style') ?? ''
+
+      expect(style).toContain('os-spinner-rotate')
+      expect(style).toContain('os-spinner-dash')
+    })
+  })
+
+  describe('size prop', () => {
+    const sizes = Object.entries(SPINNER_SIZES)
+
+    it.each(sizes)('applies %s size classes', (size, expectedClasses) => {
+      const wrapper = mount(OsSpinner, {
+        props: { size: size as Size },
+      })
+      const classes = wrapper.classes()
+
+      for (const cls of expectedClasses.split(' ')) {
+        expect(classes).toContain(cls)
+      }
+    })
+
+    it('defaults to md size', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.classes()).toContain('h-[1.5em]')
+      expect(wrapper.classes()).toContain('w-[1.5em]')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has role="status"', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.attributes('role')).toBe('status')
+    })
+
+    it('has default aria-label "Loading"', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.attributes('aria-label')).toBe('Loading')
+    })
+
+    it('allows custom aria-label', () => {
+      const wrapper = mount(OsSpinner, {
+        attrs: { 'aria-label': 'Saving changes' },
+      })
+
+      expect(wrapper.attributes('aria-label')).toBe('Saving changes')
+    })
+
+    it('is decorative when aria-hidden="true"', () => {
+      const wrapper = mount(OsSpinner, {
+        attrs: { 'aria-hidden': 'true' },
+      })
+
+      expect(wrapper.attributes('aria-hidden')).toBe('true')
+      expect(wrapper.attributes('role')).toBeUndefined()
+      expect(wrapper.attributes('aria-label')).toBeUndefined()
+    })
+
+    it('is semantic by default (no aria-hidden)', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.attributes('aria-hidden')).toBeUndefined()
+      expect(wrapper.attributes('role')).toBe('status')
+    })
+  })
+
+  describe('css', () => {
+    it('has inline-flex display', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.classes()).toContain('inline-flex')
+    })
+
+    it('has shrink-0 class', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.classes()).toContain('shrink-0')
+    })
+
+    it('merges custom classes', () => {
+      const wrapper = mount(OsSpinner, {
+        attrs: { class: 'text-red-500' },
+      })
+
+      expect(wrapper.classes()).toContain('text-red-500')
+      expect(wrapper.classes()).toContain('os-spinner')
+    })
+  })
+
+  describe('keyboard accessibility', () => {
+    it('is not focusable (non-interactive element)', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.attributes('tabindex')).toBeUndefined()
+    })
+
+    it('has no interactive role', () => {
+      const wrapper = mount(OsSpinner)
+
+      expect(wrapper.attributes('role')).not.toBe('button')
+      expect(wrapper.attributes('role')).not.toBe('link')
+    })
+  })
+})
diff --git a/packages/ui/src/components/OsSpinner/OsSpinner.stories.ts b/packages/ui/src/components/OsSpinner/OsSpinner.stories.ts
new file mode 100644
index 000000000..728ad8580
--- /dev/null
+++ b/packages/ui/src/components/OsSpinner/OsSpinner.stories.ts
@@ -0,0 +1,113 @@
+import { computed } from 'vue'
+
+import OsSpinner from './OsSpinner.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta: Meta<typeof OsSpinner> = {
+  title: 'Components/OsSpinner',
+  component: OsSpinner,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof OsSpinner>
+
+interface PlaygroundArgs {
+  size: string
+  ariaLabel: string
+}
+
+export const Playground: StoryObj<PlaygroundArgs> = {
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    ariaLabel: {
+      control: 'text',
+    },
+  },
+  args: {
+    size: 'md',
+    ariaLabel: 'Loading',
+  },
+  render: (args) => ({
+    components: { OsSpinner },
+    setup() {
+      const spinnerProps = computed(() => ({
+        size: args.size,
+      }))
+      const ariaLabel = computed(() => args.ariaLabel || undefined)
+      return { spinnerProps, ariaLabel }
+    },
+    template: `<OsSpinner v-bind="spinnerProps" :aria-label="ariaLabel" />`,
+  }),
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { OsSpinner },
+    template: `
+      <div data-testid="all-sizes" class="flex items-end gap-6">
+        <div class="flex flex-col items-center gap-2">
+          <OsSpinner size="xs" />
+          <span class="text-xs text-gray-500">xs</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsSpinner size="sm" />
+          <span class="text-xs text-gray-500">sm</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsSpinner size="md" />
+          <span class="text-xs text-gray-500">md</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsSpinner size="lg" />
+          <span class="text-xs text-gray-500">lg</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsSpinner size="xl" />
+          <span class="text-xs text-gray-500">xl</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsSpinner size="2xl" />
+          <span class="text-xs text-gray-500">2xl</span>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const InheritColor: Story = {
+  render: () => ({
+    components: { OsSpinner },
+    template: `
+      <div data-testid="inherit-color" class="flex items-center gap-6 text-lg">
+        <span class="text-red-500"><OsSpinner size="lg" aria-label="Error loading" /></span>
+        <span class="text-green-500"><OsSpinner size="lg" aria-label="Success loading" /></span>
+        <span class="text-blue-500"><OsSpinner size="lg" aria-label="Info loading" /></span>
+        <span class="text-gray-400"><OsSpinner size="lg" aria-label="Default loading" /></span>
+      </div>
+    `,
+  }),
+}
+
+export const InlineWithText: Story = {
+  render: () => ({
+    components: { OsSpinner },
+    template: `
+      <div data-testid="inline-text" class="flex flex-col gap-4">
+        <p class="text-sm flex items-center gap-2">
+          <OsSpinner size="sm" /> Loading results...
+        </p>
+        <p class="text-base flex items-center gap-2">
+          <OsSpinner size="md" /> Processing your request...
+        </p>
+        <p class="text-lg flex items-center gap-2">
+          <OsSpinner size="lg" /> Please wait...
+        </p>
+      </div>
+    `,
+  }),
+}
diff --git a/packages/ui/src/components/OsSpinner/OsSpinner.visual.spec.ts b/packages/ui/src/components/OsSpinner/OsSpinner.visual.spec.ts
new file mode 100644
index 000000000..a22441bec
--- /dev/null
+++ b/packages/ui/src/components/OsSpinner/OsSpinner.visual.spec.ts
@@ -0,0 +1,101 @@
+import { AxeBuilder } from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
+
+import type { Page } from '@playwright/test'
+
+/**
+ * Visual regression tests for OsSpinner component
+ *
+ * These tests capture screenshots of Storybook stories and compare them
+ * against baseline images to detect unintended visual changes.
+ * Each test also runs accessibility checks using axe-core.
+ *
+ * Note: Spinner animations are paused via Playwright's CSS override
+ * to ensure deterministic screenshots.
+ */
+
+const STORY_URL = '/iframe.html?id=components-osspinner'
+const STORY_ROOT = '#storybook-root'
+
+/**
+ * Wait for fonts and pause animations for deterministic screenshots
+ */
+async function waitForReady(page: Page) {
+  await page.evaluate(async () => document.fonts.ready)
+  // Pause all animations for deterministic screenshots
+  await page.addStyleTag({
+    content: '*, *::before, *::after { animation-play-state: paused !important; }',
+  })
+}
+
+/**
+ * Helper to run accessibility check on the current page
+ */
+async function checkA11y(page: Page) {
+  const results = await new AxeBuilder({ page }).include(STORY_ROOT).analyze()
+
+  expect(results.violations).toEqual([])
+}
+
+test.describe('OsSpinner keyboard accessibility', () => {
+  test('spinner is not focusable and has status role', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-sizes&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+
+    const spinners = root.locator('.os-spinner')
+    const count = await spinners.count()
+
+    expect(count).toBeGreaterThan(0)
+
+    for (let i = 0; i < count; i++) {
+      const spinner = spinners.nth(i)
+
+      await expect(spinner).toHaveAttribute('role', 'status')
+      await expect(spinner).not.toHaveAttribute('tabindex')
+    }
+
+    // Verify no spinner receives focus via Tab navigation
+    await page.keyboard.press('Tab')
+    for (let i = 0; i < count; i++) {
+      await expect(spinners.nth(i)).not.toBeFocused()
+    }
+  })
+})
+
+test.describe('OsSpinner visual regression', () => {
+  test('all sizes', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-sizes&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="all-sizes"]')).toHaveScreenshot('all-sizes.png')
+
+    await checkA11y(page)
+  })
+
+  test('inherit color', async ({ page }) => {
+    await page.goto(`${STORY_URL}--inherit-color&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="inherit-color"]')).toHaveScreenshot(
+      'inherit-color.png',
+    )
+
+    await checkA11y(page)
+  })
+
+  test('inline with text', async ({ page }) => {
+    await page.goto(`${STORY_URL}--inline-with-text&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="inline-text"]')).toHaveScreenshot('inline-text.png')
+
+    await checkA11y(page)
+  })
+})
diff --git a/packages/ui/src/components/OsSpinner/OsSpinner.vue b/packages/ui/src/components/OsSpinner/OsSpinner.vue
new file mode 100644
index 000000000..7086db5ea
--- /dev/null
+++ b/packages/ui/src/components/OsSpinner/OsSpinner.vue
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { defineComponent, getCurrentInstance, h, isVue2 } from 'vue-demi'
+
+  import { cn } from '#src/utils'
+
+  import { SPINNER_SIZES } from './spinner.variants'
+
+  import type { Size } from '#src/types'
+  import type { ClassValue } from 'clsx'
+  import type { PropType } from 'vue-demi'
+
+  const SVG_ATTRS = {
+    viewBox: '0 0 50 50',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }
+
+  const CIRCLE_ATTRS = {
+    cx: '25',
+    cy: '25',
+    r: '20',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '4',
+    'stroke-linecap': 'round',
+  }
+
+  const CIRCLE_STYLE =
+    'transform-origin:25px 25px;animation:os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite'
+
+  function vueAttrs(attrs: Record<string, string>, style: string): Record<string, unknown> {
+    /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */
+    return isVue2 ? { attrs, style } : { ...attrs, style }
+    /* v8 ignore stop */
+  }
+
+  function createSvg() {
+    const circle = h('circle', vueAttrs(CIRCLE_ATTRS, CIRCLE_STYLE))
+    return h('svg', vueAttrs(SVG_ATTRS, 'width:100%;height:100%;overflow:hidden'), [circle])
+  }
+
+  /**
+   * Animated loading spinner with configurable size.
+   * Inherits color from parent via `currentColor`.
+   *
+   * Semantic by default (`role="status"`, `aria-label="Loading"`).
+   * Pass `aria-hidden="true"` to make it decorative (suppresses role/aria-label).
+   *
+   * @prop size - Spinner size (xs/sm/md/lg/xl/2xl)
+   */
+  export default defineComponent({
+    name: 'OsSpinner',
+    inheritAttrs: false,
+    props: {
+      size: {
+        type: String as PropType<Size>,
+        default: 'md',
+      },
+    },
+    setup(props, { attrs }) {
+      /* v8 ignore start -- Vue 2 only */
+      const instance = isVue2 ? getCurrentInstance() : null
+      /* v8 ignore stop */
+
+      return () => {
+        const sizeClass = SPINNER_SIZES[props.size]
+        const svg = createSvg()
+
+        /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */
+        if (isVue2) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const proxy = instance?.proxy as any
+          const parentClass = proxy?.$vnode?.data?.staticClass || ''
+          const parentDynClass = proxy?.$vnode?.data?.class
+          const parentAttrs = proxy?.$vnode?.data?.attrs || {}
+
+          const isDecorative =
+            String(parentAttrs['aria-hidden']) === 'true' || String(attrs['aria-hidden']) === 'true'
+          const a11yAttrs = isDecorative
+            ? { 'aria-hidden': 'true' }
+            : {
+                role: 'status',
+                'aria-label': parentAttrs['aria-label'] || attrs['aria-label'] || 'Loading',
+              }
+
+          return h(
+            'span',
+            {
+              class: cn('os-spinner inline-flex shrink-0', sizeClass, parentClass, parentDynClass),
+              attrs: { ...parentAttrs, ...attrs, ...a11yAttrs },
+            },
+            [svg],
+          )
+        }
+        /* v8 ignore stop */
+
+        const {
+          class: attrClass,
+          'aria-label': ariaLabel,
+          'aria-hidden': ariaHidden,
+          ...restAttrs
+        } = attrs as Record<string, unknown>
+
+        const isDecorative = String(ariaHidden) === 'true'
+        const a11yAttrs = isDecorative
+          ? { 'aria-hidden': 'true' as const }
+          : { role: 'status' as const, 'aria-label': (ariaLabel as string) || 'Loading' }
+
+        return h(
+          'span',
+          {
+            class: cn('os-spinner inline-flex shrink-0', sizeClass, attrClass as ClassValue),
+            ...restAttrs,
+            ...a11yAttrs,
+          },
+          [svg],
+        )
+      }
+    },
+  })
+</script>
diff --git a/packages/ui/src/components/OsSpinner/__screenshots__/chromium/all-sizes.png b/packages/ui/src/components/OsSpinner/__screenshots__/chromium/all-sizes.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b7a638234f1549c194255f82ed386439a6585c4
GIT binary patch
literal 6305
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsSpinner/__screenshots__/chromium/inherit-color.png b/packages/ui/src/components/OsSpinner/__screenshots__/chromium/inherit-color.png
new file mode 100644
index 0000000000000000000000000000000000000000..5476d1e6856c8ea036960c8ef1fb396e67c6b739
GIT binary patch
literal 4208
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
JjpoCc{{hlb{}KQI

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsSpinner/__screenshots__/chromium/inline-text.png b/packages/ui/src/components/OsSpinner/__screenshots__/chromium/inline-text.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fdbe2ad4aa54d7aaff6db18b0a9b233cfc3f6b3
GIT binary patch
literal 7997
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsSpinner/index.ts b/packages/ui/src/components/OsSpinner/index.ts
new file mode 100644
index 000000000..9eb190167
--- /dev/null
+++ b/packages/ui/src/components/OsSpinner/index.ts
@@ -0,0 +1,2 @@
+export { default as OsSpinner } from './OsSpinner.vue'
+export { SPINNER_SIZES } from './spinner.variants'
diff --git a/packages/ui/src/components/OsSpinner/spinner.variants.ts b/packages/ui/src/components/OsSpinner/spinner.variants.ts
new file mode 100644
index 000000000..7b3e78cc0
--- /dev/null
+++ b/packages/ui/src/components/OsSpinner/spinner.variants.ts
@@ -0,0 +1,13 @@
+import type { Size } from '#src/types'
+
+/**
+ * Spinner size classes (em-based, scales with parent font-size)
+ */
+export const SPINNER_SIZES: Record<Size, string> = {
+  xs: 'h-[0.75em] w-[0.75em]',
+  sm: 'h-[1em] w-[1em]',
+  md: 'h-[1.5em] w-[1.5em]',
+  lg: 'h-[2em] w-[2em]',
+  xl: 'h-[2.5em] w-[2.5em]',
+  '2xl': 'h-[3em] w-[3em]',
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 3cea2d04d..f416e68f3 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -7,7 +7,7 @@
  * - Registered globally when using the plugin: app.use(OcelotUI)
  */
 
-export { OsButton, buttonVariants, type ButtonVariants } from './OsButton'
+export { OsButton, buttonVariants, type ButtonSize, type ButtonVariants } from './OsButton'
 export {
   OsIcon,
   ICON_SIZES,
@@ -17,3 +17,4 @@ export {
   SYSTEM_ICONS,
   type SystemIconName,
 } from './OsIcon'
+export { OsSpinner, SPINNER_SIZES } from './OsSpinner'
diff --git a/packages/ui/src/types.d.ts b/packages/ui/src/types.d.ts
index dbd3bf433..8e30fe21d 100644
--- a/packages/ui/src/types.d.ts
+++ b/packages/ui/src/types.d.ts
@@ -1,13 +1,15 @@
 /**
- * Component prop types based on Tailwind CSS scales
+ * Shared vocabulary types for component props.
  *
- * These types ensure consistency across all components.
- * When a component supports a prop, it must support all values of that scale.
+ * These types define a common naming convention across components.
+ * Components pick the subset that makes sense for them:
+ * - OsIcon/OsSpinner: all 6 sizes (inline elements, em-based)
+ * - OsButton: sm–xl (interactive element, pixel-based touch targets)
  */
 
 /**
- * Size scale for components (buttons, inputs, avatars, etc.)
- * Maps to Tailwind's text/spacing scale
+ * Size vocabulary shared across components.
+ * Each component supports the subset that makes sense for its context.
  */
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
diff --git a/webapp/Dockerfile b/webapp/Dockerfile
index 3f2110311..e192d33f1 100644
--- a/webapp/Dockerfile
+++ b/webapp/Dockerfile
@@ -13,9 +13,8 @@ RUN apk --no-cache add git python3 make g++
 RUN mkdir -p /app
 WORKDIR /app
 COPY packages/ui .
-RUN --mount=type=cache,target=/yarn-cache,sharing=locked \
-    yarn install --production=false --frozen-lockfile --non-interactive --cache-folder /yarn-cache
-RUN yarn run build
+RUN npm ci
+RUN npm run build
 
 FROM node:25.6.1-alpine AS base
 LABEL org.label-schema.name="ocelot.social:webapp"
diff --git a/webapp/Dockerfile.maintenance b/webapp/Dockerfile.maintenance
index da2d12173..f673c91ef 100644
--- a/webapp/Dockerfile.maintenance
+++ b/webapp/Dockerfile.maintenance
@@ -23,9 +23,8 @@ RUN apk --no-cache add git python3 make g++
 RUN mkdir -p /app
 WORKDIR /app
 COPY packages/ui .
-RUN --mount=type=cache,target=/yarn-cache,sharing=locked \
-    yarn install --production=false --frozen-lockfile --non-interactive --cache-folder /yarn-cache
-RUN yarn run build
+RUN npm ci
+RUN npm run build
 
 FROM node:25.6.1-alpine AS build
 ENV NODE_ENV="production"
diff --git a/webapp/components/Uploader/ImageUploader.vue b/webapp/components/Uploader/ImageUploader.vue
index 2a6241ea0..9de81a605 100644
--- a/webapp/components/Uploader/ImageUploader.vue
+++ b/webapp/components/Uploader/ImageUploader.vue
@@ -7,7 +7,7 @@
       :use-custom-slot="true"
       @vdropzone-file-added="fileAdded"
     >
-      <loading-spinner v-if="isLoadingImage" />
+      <os-spinner v-if="isLoadingImage" size="lg" />
       <os-icon v-else-if="!hasImage" :icon="icons.image" />
       <div v-if="!hasImage" class="supported-formats">
         {{ $t('contribution.teaserImage.supportedFormats') }}
@@ -58,20 +58,19 @@
 </template>
 
 <script>
-import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { OsButton, OsIcon, OsSpinner } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import Cropper from 'cropperjs'
 import VueDropzone from 'nuxt-dropzone'
-import LoadingSpinner from '~/components/_new/generic/LoadingSpinner/LoadingSpinner'
 import 'cropperjs/dist/cropper.css'
 
 const minAspectRatio = 0.3
 
 export default {
   components: {
-    LoadingSpinner,
     OsButton,
     OsIcon,
+    OsSpinner,
     VueDropzone,
   },
   props: {
diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js
deleted file mode 100644
index d61f02db4..000000000
--- a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.story.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import helpers from '~/storybook/helpers'
-import LoadingSpinner from './LoadingSpinner.vue'
-
-storiesOf('Generic/LoadingSpinner', module)
-  .addDecorator(helpers.layout)
-
-  .add('default', () => ({
-    components: { LoadingSpinner },
-    template: '<loading-spinner />',
-  }))
diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
deleted file mode 100644
index 529a029d9..000000000
--- a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <svg viewBox="0 0 50 50" class="loading-spinner">
-    <circle cx="25" cy="25" r="20" class="circle" />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'LoadingSpinner',
-}
-</script>
-
-<style lang="scss">
-.loading-spinner {
-  height: $size-button-base;
-  overflow: hidden;
-  stroke: currentColor;
-  animation: rotate 16s linear infinite;
-
-  > .circle {
-    fill: none;
-    stroke-width: 5;
-    stroke-linecap: round;
-    animation: dash 1.5s ease-in-out infinite;
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(2160deg);
-  }
-}
-</style>
diff --git a/webapp/pages/admin/index.vue b/webapp/pages/admin/index.vue
index 84cc85199..91657da8f 100644
--- a/webapp/pages/admin/index.vue
+++ b/webapp/pages/admin/index.vue
@@ -1,69 +1,70 @@
 <template>
   <base-card>
-    <ApolloQuery :query="Statistics">
-      <template v-slot="{ result: { loading, error, data } }">
-        <template v-if="loading">
-          <ds-space centered>
-            <ds-spinner size="large"></ds-spinner>
-          </ds-space>
-        </template>
-        <template v-else-if="error">
-          <ds-space centered>
-            <ds-space>
-              <img :src="errorIconPath" width="40" />
+    <template v-if="$apollo.loading">
+      <div style="text-align: center; padding: 48px 0">
+        <os-spinner size="xl" />
+      </div>
+    </template>
+    <template v-else-if="statistics">
+      <ds-space margin="large">
+        <ds-flex>
+          <ds-flex-item
+            v-for="(value, name) in filterStatistics(statistics)"
+            :key="name"
+            :width="{ base: '100%', sm: '50%', md: '33%' }"
+          >
+            <ds-space margin="small">
+              <ds-number :count="0" :label="$t('admin.dashboard.' + name)" size="x-large" uppercase>
+                <client-only slot="count">
+                  <hc-count-to :end-val="value" />
+                </client-only>
+              </ds-number>
             </ds-space>
-            <ds-text>
-              {{ $t('site.error-occurred') }}
-            </ds-text>
-          </ds-space>
-        </template>
-        <template v-else-if="data">
-          <ds-space margin="large">
-            <ds-flex>
-              <ds-flex-item
-                v-for="(value, name, index) in filterStatistics(data.statistics)"
-                :key="index"
-                :width="{ base: '100%', sm: '50%', md: '33%' }"
-              >
-                <ds-space margin="small">
-                  <ds-number
-                    :count="0"
-                    :label="$t('admin.dashboard.' + name)"
-                    size="x-large"
-                    uppercase
-                  >
-                    <client-only slot="count">
-                      <hc-count-to :end-val="value" />
-                    </client-only>
-                  </ds-number>
-                </ds-space>
-              </ds-flex-item>
-            </ds-flex>
-          </ds-space>
-        </template>
-      </template>
-    </ApolloQuery>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-space>
+    </template>
+    <template v-else>
+      <ds-space centered>
+        <ds-space>
+          <img :src="errorIconPath" width="40" />
+        </ds-space>
+        <ds-text>
+          {{ $t('site.error-occurred') }}
+        </ds-text>
+      </ds-space>
+    </template>
   </base-card>
 </template>
 
 <script>
+import { OsSpinner } from '@ocelot-social/ui'
 import HcCountTo from '~/components/CountTo.vue'
 import { Statistics } from '~/graphql/admin/Statistics'
 
 export default {
   components: {
+    OsSpinner,
     HcCountTo,
   },
   data() {
     return {
       errorIconPath: '/img/svg/emoji/cry.svg',
-      Statistics,
+      statistics: null,
     }
   },
+  apollo: {
+    statistics: {
+      query: Statistics,
+      update(data) {
+        return data.statistics
+      },
+    },
+  },
   methods: {
     filterStatistics(data) {
-      delete data.__typename
-      return data
+      const { __typename, ...rest } = data
+      return rest
     },
   },
 }
diff --git a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
index 40db79583..c7deda23f 100644
--- a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
@@ -1071,13 +1071,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -1582,13 +1600,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -2113,13 +2149,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -3147,13 +3201,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -4200,13 +4272,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -5014,13 +5104,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -5848,13 +5956,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -6812,13 +6938,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -7952,13 +8096,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -9015,13 +9177,31 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
diff --git a/webapp/pages/groups/_id/_slug.vue b/webapp/pages/groups/_id/_slug.vue
index 9a48b3f33..1bba20f86 100644
--- a/webapp/pages/groups/_id/_slug.vue
+++ b/webapp/pages/groups/_id/_slug.vue
@@ -268,9 +268,9 @@
           </template>
           <template v-else-if="$apollo.loading">
             <ds-grid-item column-span="fullWidth">
-              <ds-space centered>
-                <ds-spinner size="base"></ds-spinner>
-              </ds-space>
+              <div style="text-align: center; padding: 48px 0">
+                <os-spinner size="lg" />
+              </div>
             </ds-grid-item>
           </template>
           <template v-else>
@@ -280,7 +280,9 @@
           </template>
         </masonry-grid>
         <client-only>
-          <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
+          <infinite-loading v-if="hasMore" @infinite="showMoreContributions">
+            <os-spinner slot="spinner" size="lg" />
+          </infinite-loading>
         </client-only>
       </ds-flex-item>
     </ds-flex>
@@ -288,7 +290,7 @@
 </template>
 
 <script>
-import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { OsButton, OsIcon, OsSpinner } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import uniqBy from 'lodash/uniqBy'
 import { profilePagePosts } from '~/graphql/PostQuery'
@@ -327,6 +329,7 @@ export default {
   components: {
     OsButton,
     OsIcon,
+    OsSpinner,
     AvatarUploader,
     Category,
     ContentViewer,
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index d43773e1d..dd00d59f8 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -146,13 +146,15 @@
 
     <!-- infinite loading -->
     <client-only>
-      <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
+      <infinite-loading v-if="hasMore" @infinite="showMoreContributions">
+        <os-spinner slot="spinner" size="lg" />
+      </infinite-loading>
     </client-only>
   </div>
 </template>
 
 <script>
-import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { OsButton, OsIcon, OsSpinner } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import postListActions from '~/mixins/postListActions'
 import mobile from '~/mixins/mobile'
@@ -178,6 +180,7 @@ export default {
     HashtagsFilter,
     OsButton,
     OsIcon,
+    OsSpinner,
     PostTeaser,
     HcEmpty,
     MasonryGrid,
diff --git a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
index 7625993ca..d9f033cc2 100644
--- a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
@@ -679,13 +679,31 @@ exports[`ProfileSlug given an authenticated user given another profile user and
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -1447,13 +1465,31 @@ exports[`ProfileSlug given an authenticated user given another profile user and
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -2076,13 +2112,31 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
@@ -2747,13 +2801,31 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
             <div
               class="infinite-status-prompt"
               data-v-644ea9c9=""
-              style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px; display: none;"
+              style="display: none;"
             >
-              <i
-                class="loading-default"
-                data-v-46b20d22=""
+              <span
+                aria-label="Loading"
+                class="os-spinner inline-flex shrink-0 h-[2em] w-[2em]"
                 data-v-644ea9c9=""
-              />
+                role="status"
+              >
+                <svg
+                  style="width: 100%; height: 100%; overflow: hidden;"
+                  viewBox="0 0 50 50"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    fill="none"
+                    r="20"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="transform-origin: 25px 25px; animation: os-spinner-rotate 16s linear infinite,os-spinner-dash 1.5s ease-in-out infinite;"
+                  />
+                </svg>
+              </span>
             </div>
              
             <div
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 60ac1a011..ced105402 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -190,9 +190,9 @@
           </template>
           <template v-else-if="$apollo.loading">
             <ds-grid-item column-span="fullWidth">
-              <ds-space centered>
-                <ds-spinner size="base"></ds-spinner>
-              </ds-space>
+              <div style="text-align: center; padding: 48px 0">
+                <os-spinner size="lg" />
+              </div>
             </ds-grid-item>
           </template>
           <template v-else>
@@ -202,7 +202,9 @@
           </template>
         </masonry-grid>
         <client-only>
-          <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
+          <infinite-loading v-if="hasMore" @infinite="showMoreContributions">
+            <os-spinner slot="spinner" size="lg" />
+          </infinite-loading>
         </client-only>
       </ds-flex-item>
     </ds-flex>
@@ -210,7 +212,7 @@
 </template>
 
 <script>
-import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { OsButton, OsIcon, OsSpinner } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import uniqBy from 'lodash/uniqBy'
 import { mapGetters, mapMutations } from 'vuex'
@@ -247,6 +249,7 @@ export default {
   components: {
     OsButton,
     OsIcon,
+    OsSpinner,
     SocialMedia,
     PostTeaser,
     HcFollowButton,