JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
 <div id="wait-modal" class="waiting" style="display:none"></div>
 
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  <p>This is a bunch of text, over and over again.<p>
  </div>
 
 <br>
 
 <button onclick="document.getElementById('wait-modal').style.display='block'">
   Load Data
 </button>

CSS

.container {
  width:300px;
  height:300px;
  max-height:300px;  
  overflow-y:scroll;
  background-color:#dedede;
  position:relative;
}

.waiting {
  position:absolute;
  height:100%;
  width:100%;
  color:white;
  text-align:center;
  padding-top:20px;
  
  background-color:rgba(0,0,0,0.5);
  transition:background-color 250ms ease;
  
  
}

.waiting:hover {
  background-color:rgba(0,0,0,0.35);
  transition:background-color 250ms ease;
}
.waiting:after {
  content:'PLEASE WAIT...';
  font-size:30px;
}