fix ErrorBoundary component scene (thanks @LavaSquids)

renderer/src/builtins/dashboard/styles/pages/home/_index.scss

@@ -7,6 +7,9 @@
   &.vz-dashboard-layout {
     padding: 0;
     max-width: 100%;
+    > .vz-dashboard-error-boundary {
+      padding: var(--vz-dashboard-layout-padding-vertical) var(--vz-dashboard-layout-padding-horizontal);
+    }
   }
   .vz-wave-divider {
     color: var(--background-primary);

renderer/src/modules/components/ErrorBoundary.jsx

@@ -66,27 +66,32 @@ export default class ErrorBoundary extends PureComponent {
   }
 
   render () {
-    // const { PremiumModalHeaderAnimationTier2 } = getModule('PremiumModalHeaderAnimationTier2');
+    const { PremiumPaymentAnimationTier2 } = getModule('PremiumPaymentAnimationTier2');
+    this.setState({ nextScene: 'idle_loop' });
     return (
       <>
-        {this.state.hasCrashed && <div className={joinClassNames('vz-error-boundary', this.props.className, this.classes.colorStandard)}>
-          <h1 className={joinClassNames('vz-error-boundary-header', this.props.headerClassName)}>
-            {Messages.ERROR_GENERIC_TITLE}
-          </h1>
-          <div className='vz-error-boundary-text'>
-            An error occurred while rendering the page:
+        {this.state.hasCrashed && (
+          <div className={joinClassNames('vz-error-boundary', this.props.className, this.classes.colorStandard)}>
+            <h1 className={joinClassNames('vz-error-boundary-header', this.props.headerClassName)}>
+              {Messages.ERROR_GENERIC_TITLE}
+            </h1>
+            <div className='vz-error-boundary-text'>
+              An error occurred while rendering the page:
+            </div>
+            <div className={joinClassNames('vz-error-boundary-block', 'vz-error-boundary-error-stack', this.classes.thin)}>
+              {this.state.errorStack}
+            </div>
+            <div className='vz-error-boundary-text'>
+              Component stack:
+            </div>
+            <div className={joinClassNames('vz-error-boundary-block', 'vz-error-boundary-component-stack', this.classes.thin)}>
+              {this.state.componentStack}
+            </div>
+            {this.props.showScene && (
+              <PremiumPaymentAnimationTier2 className='vz-error-boundary-scene' nextScene={this.state.nextScene} onScenePlay={evt => this.setState({ nextScene: PremiumPaymentAnimationTier2.getNextScene(evt) })} />
+            )}
           </div>
-          <div className={joinClassNames('vz-error-boundary-block', 'vz-error-boundary-error-stack', this.classes.thin)}>
-            {this.state.errorStack}
-          </div>
-          <div className='vz-error-boundary-text'>
-            Component stack:
-          </div>
-          <div className={joinClassNames('vz-error-boundary-block', 'vz-error-boundary-component-stack', this.classes.thin)}>
-            {this.state.componentStack}
-          </div>
-          {/* {this.props.showScene && <PremiumModalHeaderAnimationTier2 className='vz-error-boundary-scene'/>} */}
-        </div>}
+        )}
         {!this.state.hasCrashed && this.props.children}
       </>
     );

renderer/src/styles/components/_error-boundary.scss

@@ -28,7 +28,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    .panningAnimation-38NjY9 {
+    > div {
       bottom: 0;
     }
   }