JSFiddle - React, Tailwind, and code Playground

Data Directory Loading Prototype

by Hugo Carneiro

HTML

<div class="viewport-content scroll">
  <div class="container-fluid" id="data-directory">
    <div class="row">
      <div id="directory-list">
        <!-- THIS NEEDS TO BE ADDED TO THE HTML
             IT WILL BE HIDDEN WITH CSS -->
        <div class="directory-loading">
          <div class="directory-loading-screen"></div>
          <div class="directory-loading-body">
            <div class="loader-wrapper">
              <div class="loader"></div>
            </div>
            <p class="loading-text"></p>
          </div>
        </div>
        <form id="directory-search">
          <span class="glyphicon glyphicon-search"></span>
          <input id="search" type="search" placeholder="Search">
          <a href="#" class="btn btn-link" id="search-cancel">Cancel</a>
        </form>
        <div class="list-default list-index-enabled" id="directory-entries">
          <ul>
            <li class="divider" data-letter="A">A</li>
            <li class="linked data-linked active" data-type="entry" data-index="41">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">A-bis</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked data-linked" data-type="entry" data-index="42">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">A-GNSS</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked data-linked" data-type="entry" data-index="43">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">A-GPS</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked data-linked" data-type="entry" data-index="44">
              <div class="list-image"></div>
              <div...

CSS

.viewport-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#data-directory,
#data-directory > .row,
#directory-details,
#directory-list {
  height: 100%;
}

#directory-list {
  padding: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  position: relative; // Needs to be added
}

#directory-search {
  background: #D2D2D2;
  padding: 10px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
}

#directory-search .glyphicon-search {
  position: absolute;
  top: 15px;
  left: 18px;
  color: #c5c5c5;
  font-size: 14px;
  z-index: 1;
}

#search {
  height: 24px;
  line-height: 20px;
  padding: 2px 10px 2px 30px;
  border-radius: 3px;
  border: none;
  width: 100%;
  font-size: 14px;
  -webkit-transform: translate3d(0, -1px, 0);
  transform: translate3d(0, -1px, 0);
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
  outline: none;
}

#search-cancel {
  position: absolute;
  top: 3px;
  right: 0;
  color: #2177D4;
  font-size: 14px;
  line-height: 24px;
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: all 0.35s 0.03s ease;
  transition: all 0.35s 0.03s ease;
}

#directory-entries {
  height: 100%;
  position: relative;
}

#directory-entries.list-index-enabled {
  padding-right: 20px;
}

#directory-entries {
  padding-top: 44px;
}

.list-default {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.list-default ul {
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.list-default ul > li {
  list-style: none;
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  padding: 10px 10px 10px 0;
  position: relative;
}

.list-default ul > li.linked {
  padding-right: 44px;
}

#directory-list li {
  margin-left: 10px;
  border-bottom: none;
  border-top: 1px solid rgba(51, 51, 51, 0.2);
  color: #333333;
  cursor: pointer;
}

#directory-list.disabled li {
  pointer-events:...

JavaScript

// Sandbox variables
var totalLoadingTime = 10000; //Change this to simulate different loading times
// ____________ //

var loadingOverlayDelay = 1000; // Time it takes to display the loading overlay after a click
var width;
var messageTimeout;
var messageDelay = 5000 // "Loading..." text delay to display

$('.data-linked').on('click', function() {
	// No need to worry about this - It's already in the system
  $('.data-linked').removeClass('active');
  $(this).addClass('active');

  disableClicks(); // Disables clicks
  startLoading(); // Simulates the loading of content
});

// Function to simulate the loading of the content
function startLoading() {
  var start = new Date;

  (function update() {
    if ((new Date - start) >= totalLoadingTime) {
      removeLoading();
    } else if ((new Date - start) >= loadingOverlayDelay && (new Date - start) < (loadingOverlayDelay + 10)) {
      addLoading();
      setTimeout(update, 0);
    } else {
      setTimeout(update, 0);
    }
  })();
};

// Function that will disable clicks on both side of the UI
function disableClicks() {
  $('#directory-list, #directory-details').addClass('disabled'); // Disables List
}

// Function that will fade in the loading overlay
function addLoading() {
  calculateWidth();

  // The following adds Loading Overlay to a specific area depending on the device width
  if (width >= 640) {
    $('#directory-details').find('.directory-loading').fadeIn(400);
  } else {
    $('#directory-list').find('.directory-loading').fadeIn(400);
  }
	
  // Delay to display the "Loading..." text
  messageTimeout = setTimeout(function() {
    $('.directory-loading .loading-text').hide().text("Loading...").fadeIn(250);
  }, messageDelay);
}

// Function that will remove the loading overlay and enable clicks
function removeLoading() {
  clearTimeout(messageTimeout); // Clears delay for text to appear

  calculateWidth();
  // The following removes Loading Overlay from a specific area depending on the device width
...