From 3a23e795acfe00401283e991af52d1f11a51ffbb Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Wed, 7 Nov 2018 09:48:10 +0100
Subject: new hero animation using bodymovin and lottie

---
 packages/dev-tools-pages/ts/pages/Trace.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'packages/dev-tools-pages/ts/pages/Trace.tsx')

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" />
-- 
cgit v1.2.3