new hero animation using bodymovin and lottie

4 files changed, 44 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 11c8c4a17..0db7c6204 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import { Lead } from 'ts/components/Typography';
 import context from 'ts/context/compiler';
@@ -10,10 +11,20 @@ import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import CompilerComponent from 'ts/components/Compiler';
 import Breakout from 'ts/components/Breakout';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Compiler() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <CompilerComponent />
             <Content>
                 <ContentBlock main title="Get started" />
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index 4d8288219..1a7abbbb1 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/cov';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import Breakout from 'ts/components/Breakout';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'cov-animation' */ 'ts/components/Animations/Cov'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Cov() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <Intro>
                 <IntroLead title="Measure your tests">
                     <p>
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index 1021e43a3..87cc90b23 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/profiler';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import Code from 'ts/components/Code';
 import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'profiler-animation' */ 'ts/components/Animations/Profiler'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Profiler() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <Intro>
                 <IntroLead title="Outline gas usage">
                     <p>
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 609ec8625..1a09d7c3a 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, hydrate } from 'react-dom';
+import * as Loadable from 'react-loadable';
 
 import context from 'ts/context/trace';
 import Base from 'ts/components/Base';
@@ -11,10 +12,20 @@ import InlineCode from 'ts/components/InlineCode';
 import { List, ListItem } from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 import Breakout from 'ts/components/Breakout';
+import Hero from 'ts/components/Hero';
+
+const Animation = Loadable({
+    loader: () => System.import(/* webpackChunkName: 'trace-animation' */ 'ts/components/Animations/Trace'),
+    loading: () => <div />,
+    delay: 1000,
+});
 
 function Trace() {
     return (
         <Base context={context}>
+            <Hero>
+                <Animation />
+            </Hero>
             <TraceComponent />
             <Content>
                 <ContentBlock main title="Get started" />