Angular Universal: avoid restarting CSS animations at DOM replacement

Question

We have a web-page that starts with some animation: coara

For performance and SEO reasons we normally pre-render our pagees into a static HTML using Angular Universal.

Problem here: The animation re-starts when the DOM is replaced by the Angular code. Is there a way to avoid this, or to wait with DOM replacement until the animation has finished (and not start it again)?

Answer 1

You could add a fake provider on your app.module.ts to know where the component is rendered:

 providers: [
    {
      provide: "isBrowser",
      useValue: true,
    },
  ],

and this import on your app.server.module.ts

 providers: [
    {
      provide: "isBrowser",
      useValue: false,
    },
  ],

Then you can import this "provider" on your component like this:

constructor(@Inject("isBrowser") public enableAnimations: boolean) {}

Now you can disable animations when the component is load on server side and add the animation on client side.