remove wormhole SVG when Canvas is ready

packages/bridge/src/components/Layout/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './../../App.less';
 import { Layout } from 'antd';
 import { Link, useLocation } from 'react-router-dom';
 
 import { LABELS } from '../../constants';
 import { contexts, AppBar } from '@oyster/common';
-import Wormhole from "../Wormhole";
+import Wormhole from '../Wormhole';
 
 const { Header, Content } = Layout;
 const { useConnectionConfig } = contexts.Connection;
@@ -13,6 +13,7 @@ const { useConnectionConfig } = contexts.Connection;
 export const AppLayout = React.memo((props: any) => {
   const { env } = useConnectionConfig();
   const location = useLocation();
+  const [wormholeReady, setWormholeReady] = useState(false);
 
   const paths: { [key: string]: string } = {
     '/faucet': '7',
@@ -22,8 +23,8 @@ export const AppLayout = React.memo((props: any) => {
     [...Object.keys(paths)].find(key => location.pathname.startsWith(key)) ||
     '';
   return (
-    <div className="App wormhole-bg">
-      <Wormhole>
+    <div className={`App${wormholeReady ? `` : ` wormhole-bg`}`}>
+      <Wormhole onCreated={() => setWormholeReady(true)}>
         <Layout title={LABELS.APP_TITLE}>
           {location.pathname !== '/' && (
             <Header className="App-Bar">

packages/bridge/src/components/Wormhole/WormholeCanvas.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { Canvas } from "react-three-fiber";
-import Camera from "./Camera";
-import WormholeGeometry from "./WormholeGeometry";
+import * as React from 'react';
+import { Canvas } from 'react-three-fiber';
+import Camera from './Camera';
+import WormholeGeometry from './WormholeGeometry';
 
 /**
  * Three.js wormhole component.
@@ -9,9 +9,9 @@ import WormholeGeometry from "./WormholeGeometry";
  * @returns {JSX.Element}
  * @constructor
  */
-const WormholeCanvas = () => {
+const WormholeCanvas = ({ onCreated }: { onCreated: any }) => {
   return (
-    <Canvas>
+    <Canvas onCreated={onCreated}>
       <Camera />
       <React.Suspense fallback={null}>
         <WormholeGeometry />

packages/bridge/src/components/Wormhole/index.tsx

@@ -1,16 +1,23 @@
-import * as React from "react";
-import WormholeCanvas from "./WormholeCanvas";
-import "./wormhole.less";
+import * as React from 'react';
+import WormholeCanvas from './WormholeCanvas';
+import './wormhole.less';
 
 /**
  * Wormhole encapsulation component.
  *
+ * @param onCreated {any}               Function called when Canvas is ready.
  * @param children  {React.ReactNode}   Elements to show above the Wormhole.
  * @constructor
  */
-const Wormhole = ({ children }: { children: React.ReactNode }) => (
+const Wormhole = ({
+  onCreated,
+  children,
+}: {
+  onCreated: any;
+  children: React.ReactNode;
+}) => (
   <>
-    <WormholeCanvas />
+    <WormholeCanvas onCreated={onCreated} />
     <div className="wormhole-overlay">{children}</div>
   </>
 );