aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/pages
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-11-07 16:48:10 +0800
committerAugust Skare <post@augustskare.no>2018-11-07 16:48:10 +0800
commit3a23e795acfe00401283e991af52d1f11a51ffbb (patch)
treed8e5a6d712887c726ba07395b751614d0a24478f /packages/dev-tools-pages/ts/pages
parent2dfca078fdf3cddb551fb33f913aade1a2e902e1 (diff)
downloaddexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.tar
dexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.tar.gz
dexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.tar.bz2
dexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.tar.lz
dexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.tar.xz
dexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.tar.zst
dexon-sol-tools-3a23e795acfe00401283e991af52d1f11a51ffbb.zip
new hero animation using bodymovin and lottie
Diffstat (limited to 'packages/dev-tools-pages/ts/pages')
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx11
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx11
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx11
-rw-r--r--packages/dev-tools-pages/ts/pages/Trace.tsx11
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" />