Component Name: formLoading¶
Last Updated: 2025-09-29 Source Code: https://bitbucket.org/i2cinc/i2c.salesforce.metadata/src/STAGING/force-app/main/default/lwc/formLoading
API Name: c-formLoading Type: Utility Component Target: lightningCommunity__Page, lightningCommunity__Default
Business Purpose¶
This reusable loading spinner component displays an animated SVG graphic with brand-colored circles during asynchronous operations. It provides visual feedback to users while data loads or processes complete, improving perceived performance and user experience.
User Interface¶
Visual Description¶
- Layout: Centered SVG animation
- Key UI Elements: Animated circles in brand colors (dark blue, blue, gray, red)
- Responsive: Fixed 200x200px size, centers within container
Component Structure¶
Files¶
formLoading.html- Template with SVG animationformLoading.js- Minimal controller (5 lines)formLoading.js-meta.xml- Metadata
HTML Template Structure¶
Inline SVG with multiple circle elements, each with CSS animations for radius and movement.
Key Template Features: - Pure CSS/SVG animations (no JavaScript) - 5 animated circles with staggered timing - Brand color scheme
JavaScript Controller¶
Properties (API)¶
@api loading¶
- Type:
Boolean - Required: No
- Default: undefined
- Description: Optional loading state flag (not currently used in template)
Tracked Properties¶
None
Wire Adapters¶
None
Public Methods¶
None
Event Handlers¶
None
Events¶
None
Styling (CSS)¶
CSS Variables Used¶
None
Custom CSS Classes¶
- Inline styles in SVG
SLDS Classes¶
None
Brand Colors Used¶
#0c3863(Dark blue)#3072d7(Blue)#6d6d6d(Gray)#de2f3d(Red)
Dependencies¶
Lightning Web Components (Base)¶
None
Custom LWC Components¶
None
Apex Classes¶
None
Objects & Fields¶
None
Configuration¶
Component Meta XML¶
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
User Interactions¶
None - purely visual component
Data Flow¶
None - static animation
Performance Considerations¶
- Pure CSS animations (very performant)
- No JavaScript overhead
- Small SVG payload
Accessibility (a11y)¶
ARIA Labels: - Missing role="status" or aria-live - Missing aria-label for screen readers
Screen Reader Support: - No announcement of loading state (CRITICAL)
Color Contrast: - Animation visible on white background
Testing¶
Jest Tests¶
None
Manual Testing Checklist¶
- [ ] Animation plays correctly
- [ ] Centers in various containers
- [ ] Screen reader announces loading
Usage Examples¶
<c-form-loading></c-form-loading>
<!-- With optional loading prop -->
<c-form-loading loading={isLoading}></c-form-loading>
Changes & History¶
- 2025-09-29: Latest version
⚠️ Pre-Go-Live Concerns¶
CRITICAL - Fix Before Go-Live¶
- No accessibility for screen readers: Component has no role="status" or aria-live announcement
- Loading prop unused: Component accepts loading prop but doesn't use it (line 4)
HIGH - Address Soon After Go-Live¶
- No conditional display: Component always shows, should hide when loading=false
- Hard-coded size: 200x200px may be too large/small for some contexts
- No text alternative: Screen reader users don't know what's loading
MEDIUM - Future Enhancement¶
- Make size configurable: Add size property (small/medium/large)
- Add loading message prop: Allow custom "Loading..." text
- Make colors configurable: Support brand themes
LOW - Monitor¶
- Animation duration hardcoded: 3.846 seconds may be too fast/slow
- Uses inline styles: Could extract to CSS file
Maintenance Notes¶
Complexity: Low Recommended Review Schedule: Annually
Key Maintainer Notes: - Used in redirectToCheckout and potentially other loading scenarios - SVG animation is performant and brand-consistent - CRITICAL: Add accessibility attributes before go-live - Component has no logic - purely presentational - Consider extracting animation durations and colors to CSS variables
Browser Compatibility: - Chrome: Latest - Firefox: Latest - Safari: Latest (SVG animate supported) - Mobile: iOS 12+, Android 8+ - IE11: Not supported (SVG animations)