title: What is the best way to add the same code to every component in React?
body: <p>I am trying to build a simple page navigation loading screen while using react-router-dom. My first instinct to start is to do something like:</p>
  <pre><code>export default function PageOne = () =&gt; {
      
      const [show, setShow] = useState('show');
  
      useEffect(() =&gt; {
          setTimeout(() =&gt; {
              setShow('');
          }, 500)
      }, [])    
  
      return (
          &lt;&gt;
              &lt;div className={`loader ${show}`}&gt;&lt;/div&gt;
              &lt;div className=&quot;PageOne&quot;&gt;
                  Here is my content for page one
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>Here, the <code>loader</code> div would be displayed with a <code>position: absolute</code>, <code>height: 100vh</code>, and <code>width: 100vw</code>. Then after 500ms, it can be animated to fade out or slide off screen.</p>
  <p>This doesn't feel like a great solution, and it means that the same code will be rewritten within every single page. Is there a simpler or more 'reacty' way to do this?</p>