import React from 'react';
import { importComponent, render } from 'hops';
import { Helmet } from 'react-helmet-async';

const Text = importComponent('./text');

const loader = load =>
  Promise.race([new Promise((_, reject) => setTimeout(reject, 10000)), load()]);

const renderText = ({ Component, loading, ...props }) => {
  return loading ? <p>Fetching content…</p> : <Component {...props} />;
};

export function App() {
  return (
    <>
      <Helmet>
        <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
      </Helmet>
      <Text loader={loader} render={renderText} subject="world" />
    </>
  );
}

export default render(<App />);

@@ -432,19 +432,101 @@
 urn 
-(%0A    %3C%3E%0A  
+%3CText loader=%7Bloader%7D render=%7BrenderText%7D subject=%22world%22 /%3E;%0A%7D%0A%0Aexport default render(%0A  %3C%3E%0A
     
@@ -530,26 +530,24 @@
    %3CHelmet%3E%0A
-  
       %3Clink 
@@ -597,18 +597,16 @@
  /%3E%0A    
-  
 %3C/Helmet
@@ -615,115 +615,21 @@
     
-  %3CText loader=%7Bloader%7D render=%7BrenderText%7D subject=%22world%22
+%3CApp
  /%3E%0A
-  
   %3C/%3E%0A
-  );%0A%7D%0A%0Aexport default render(%3CApp /%3E
 );%0A

move favicon to run only on unmocked tests