Reduce avatar fallback flicker by rendering initials server-side

Moves initial extraction from client-side JavaScript to server-side Ruby,
significantly reducing visual flicker on page load. JavaScript now only
applies the background color hash, rather than both initials and color.

Also sets a neutral dark gray default fill (hsl(0, 0%, 35%)) instead of
currentColor to minimize color transition flash in both light and dark modes.

Changes:
- Extract initials in Ruby's `extract_initials` method
- Render initials directly in SVG text element server-side
- Remove `extractInitials` method from TypeScript
- Use neutral gray fill matching final hashed color lightness (30-35%)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: akabiru

app/components/primer/open_project/avatar_fallback.ts

@@ -11,47 +11,16 @@ export class AvatarFallbackElement extends HTMLElement {
     const fallbackSvg = this.querySelector('svg[role="img"]')
     if (!fallbackSvg) return
 
-    // Extract initials from alt text
-    const initials = this.extractInitials(this.altText)
-
     // Generate consistent color based on uniqueId and altText (hash must match OP Core)
     const text = `${this.uniqueId}${this.altText}`
     const hue = this.valueHash(text)
     const color = `hsl(${hue}, 50%, 30%)`
 
-    // Set background color on rect element and initials on text element
+    // Set background color on rect element
     const rectElement = fallbackSvg.querySelector('rect')
-    const textElement = fallbackSvg.querySelector('text')
-
     if (rectElement) {
       rectElement.setAttribute('fill', color)
     }
-
-    if (textElement) {
-      textElement.textContent = initials
-    }
-  }
-
-  /*
-   * Extracts initials from a name string (first letter + last letter of last word)
-   * @param name - The name to extract initials from
-   * @returns The initials (1-2 characters)
-   */
-  private extractInitials(name: string): string {
-    if (!name) return ''
-
-    const trimmed = name.trim()
-    if (!trimmed) return ''
-
-    const first = trimmed.charAt(0).toUpperCase()
-
-    const lastSpace = trimmed.lastIndexOf(' ')
-    if (lastSpace > 0 && lastSpace < trimmed.length - 1) {
-      const last = trimmed.charAt(lastSpace + 1).toUpperCase()
-      return `${first}${last}`
-    }
-
-    return first
   }
 
   /*

app/components/primer/open_project/avatar_with_fallback.rb

@@ -5,9 +5,10 @@ module OpenProject
     # OpenProject-specific Avatar component that extends Primer::Beta::Avatar
     # to support fallback rendering with initials when no image source is provided.
     #
-    # When `src` is nil, this component renders a minimal SVG placeholder that is
-    # enhanced client-side by the AvatarFallbackElement web component to display
-    # initials with a consistent color based on the user's unique_id.
+    # When `src` is nil, this component renders an SVG with initials extracted from
+    # the alt text. The AvatarFallbackElement web component then enhances it client-side
+    # by applying a consistent background color based on the user's unique_id (using the
+    # same hash function as OP Core for consistency).
     #
     # This component follows the "extension over mutation" pattern - it extends
     # Primer::Beta::Avatar without modifying its interface, ensuring compatibility
@@ -73,14 +74,33 @@ def fallback_avatar_classes
         )
       end
 
+      def extract_initials(name)
+        return "" if name.blank?
+
+        chars = name.chars
+        first = chars[0]&.upcase || ""
+
+        last_space = name.rindex(" ")
+        if last_space && last_space < name.length - 1
+          last = name[last_space + 1]&.upcase || ""
+          "#{first}#{last}"
+        else
+          first
+        end
+      end
+
       def render_fallback
+        initials = extract_initials(@alt)
+
         svg_content = content_tag(
           :svg,
           safe_join([
-            tag.rect(width: "100%", height: "100%", fill: "currentColor"),
+            # Use a neutral dark gray as default to minimize flicker in both light/dark modes
+            # JS will replace with the hashed color (hsl(hue, 50%, 30%))
+            tag.rect(width: "100%", height: "100%", fill: "hsl(0, 0%, 35%)"),
             content_tag(
               :text,
-              nil,
+              initials,
               x: "50%",
               y: "50%",
               "text-anchor": "middle",