Pattern: How to DRY the duplicated ~200-line loader CSS across 6 Angu...

Documentation for Sessions

🎨 Pattern: How to DRY the duplicated ~200-line loader CSS across 6 Angu...

Date: 2026-02-27
Time: 23:49:34 UTC
Session: gspace1-151.4
Agent: angular
Confidence: 91%
Status: ✅ Documented

📋 Decision Context

Question:

How to DRY the duplicated ~200-line loader CSS across 6 Angular app index.html files?

Task: Session 151: Index.html DRY via generator script

🎯 Decision Made

Chosen:

Node.js generator script (tools/scripts/brand/generate-index-html.js) that reads a shared HTML template + per-app JSON config and outputs all 6 index.html files. Generated files are git-tracked with AUTO-GENERATED header comment. Run manually when loader design or brand config changes.

Options Considered:

  1. Generator script with shared template
  2. NX build executor for index.html
  3. Shared external CSS file
  4. Accept duplication

💭 Reasoning

ROOT CAUSE of duplication: Session 147 copied the Cosmic Orbital loader to all 6 apps for visual consistency (see decision dev_1772140886902). This created 1200+ lines of identical CSS across 6 files. ALTERNATIVES REJECTED: (1) NX build executor generating index.html — over-engineered build complexity for 6 files that change yearly. (2) Shared CSS file referenced from index.html — can't use external CSS before Angular boots (loader must be inline for instant display). (3) Accept duplication — violates DRY for a non-trivial CSS block that will need updates. CHOSEN PATH IS SUPERIOR because: Zero build-time dependency (git-tracked output), single template as source of truth, per-app config is explicit JSON, generator is a simple 40-line script. THIS SUPERSEDES SESSION 147 DECISION (dev_1772140886902) which established copy-paste as the pattern. WOULD BE WRONG IF: The loader needs per-app visual differentiation (different animations per app). EARLY WARNING: If a dev edits a generated index.html directly, changes will be lost on next generator run — the AUTO-GENERATED comment warns about this.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation