1 files changed, 36 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx
new file mode 100644
index 000000000..39c119d8f
--- /dev/null
+++ b/packages/website/ts/components/ui/loading.tsx
@@ -0,0 +1,36 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import Paper from 'material-ui/Paper';
+import {utils} from 'ts/utils/utils';
+import {DefaultPlayer as Video} from 'react-html5video';
+import 'react-html5video/dist/styles.css';
+
+interface LoadingProps {}
+
+interface LoadingState {}
+
+export class Loading extends React.Component<LoadingProps, LoadingState> {
+    public render() {
+        return (
+            <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{height: 500}}>
+                <Paper className="mx-auto" style={{maxWidth: 400}}>
+                    {utils.isUserOnMobile() ?
+                        <img className="p1" src="/gifs/0xAnimation.gif" width="96%" /> :
+                        <div style={{pointerEvents: 'none'}}>
+                            <Video
+                                autoPlay={true}
+                                loop={true}
+                                muted={true}
+                                controls={[]}
+                                poster="/images/loading_poster.png"
+                            >
+                                <source src="/videos/0xAnimation.mp4" type="video/mp4" />
+                            </Video>
+                        </div>
+                    }
+                    <div className="center pt2" style={{paddingBottom: 11}}>Connecting to the blockchain...</div>
+                </Paper>
+            </div>
+        );
+    }
+}