Skip to main content

Phase 8: Support & Polish

The final phase focuses on user experience polish: a support section for users to request new tools, robust error handling, loading states, and performance optimization across all services and UI components.

Prerequisites

  • Phase 5 -- Scan and report features must be complete so that loading, error, and empty states can be implemented for real workflows.
  • Phase 3 -- Admin portal core must be in place for all UI polish work.

Blocks

IDBlockDescriptionAcceptance Criteria
8.1Support section & tool request formAdd a "Support" section to the admin portal sidebar with a tool request form (tool name, description, URL, justification) that submits to a support-requests PostgreSQL table and sends a NATS notification to admins.Users can submit a tool request; admins see the request in a management view; a notification is delivered to the admin notification feed.
8.2Error handling & empty statesAudit every page and component for missing error handling. Add user-friendly error pages (403, 404, 500), inline error messages for failed API calls, retry buttons, and illustrated empty states for lists with no data (no domains, no scans, no messages).Every API failure surfaces a clear message to the user (not a raw stack trace); empty lists show an illustration and a call to action; the 404 page renders for unknown routes.
8.3Loading states & skeletonsReplace all spinner-only loading indicators with skeleton screens that match the shape of the content being loaded. Add shimmer animations and ensure skeletons appear within 100 ms of navigation.Every page that loads data shows a skeleton placeholder before content appears; there is no layout shift when real data replaces the skeleton.
8.4Performance optimizationProfile and optimize: enable Angular lazy-loading for all feature modules, tree-shake unused dependencies, compress images, add HTTP caching headers in the API Gateway, and tune PostgreSQL connection pooling. Run Lighthouse audits and address any score below 80.Lighthouse Performance score is 80+ on the landing page and admin dashboard; Time to Interactive is under 3 seconds on a simulated 4G connection; bundle size is documented.

Estimated Scope

AreaFiles / Resources
Angular modulesadmin/src/app/support/ (form, request list, admin management view)
Error handlingadmin/src/app/shared/components/error-page/, admin/src/app/shared/interceptors/error.interceptor.ts
Empty statesadmin/src/app/shared/components/empty-state/ (illustrations + CTA templates)
Skeleton componentsadmin/src/app/shared/components/skeleton/ (generic skeleton, table skeleton, card skeleton)
API Gatewayservices/api-gateway/src/middleware/cache.middleware.ts, response compression config
DatabasePostgreSQL table: support_requests; connection pool tuning in all services
NATS subjectsevents.support.request.created
CILighthouse CI integration in GitLab pipeline
Performance docsdocs/performance-baseline.md (Lighthouse scores, bundle sizes, load times)