From f22425ad2afaf84ecc3f41798f2c5784be24155f Mon Sep 17 00:00:00 2001
From: Thanos Kolovos <codegaze@gmail.com>
Date: Mon, 3 Sep 2018 11:05:38 +0300
Subject: [PATCH] Add some minor improvements to image loading (#7214)

Merge pull request 7214
---
 docs/_sass/_style.scss   |  27 +++++++++++++++++++++++++--
 docs/img/spacer.gif      | Bin 0 -> 42 bytes
 docs/pages/showcase.html |   8 ++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 docs/img/spacer.gif

diff --git a/docs/_sass/_style.scss b/docs/_sass/_style.scss
index 870429a8..4b58e33f 100644
--- a/docs/_sass/_style.scss
+++ b/docs/_sass/_style.scss
@@ -1092,6 +1092,25 @@ code.output {
   height: 100%;
 }
 
+.imageWrapper {
+  width: 100%;
+  height: 0;
+  padding-bottom: 62.623762376237624%; /* You define this doing height / width * 100% */
+  position: relative;
+  background: #717171;
+  display: block;
+
+  img {
+    width: 100%;
+    position: absolute;
+    opacity: 0;
+  }
+  img.b-loaded {
+    opacity: 1;
+    transition: opacity .5s;
+  }
+}
+
 
 /* Helper class taken from Bootstrap.
    Hides an element to all devices except screen readers.
@@ -1168,8 +1187,12 @@ code.output {
     flex: 1 1 300px;
     box-sizing: border-box;
     margin: 10px;
-    text-align: center;
-
+    figure {
+      margin: 0;
+    }
+    figcaption {
+      text-align: center;
+    }
     &.spacer {
       height: 0;
       margin: 0;
diff --git a/docs/img/spacer.gif b/docs/img/spacer.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4bcc753a12e9854923af4b9b5b9a4b76f1bc53a6
GIT binary patch
literal 42
ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NXCJQ(S^Yp0J?7nHvj+t

literal 0
HcmV?d00001

diff --git a/docs/pages/showcase.html b/docs/pages/showcase.html
index 1efe0c68..4c45abf4 100644
--- a/docs/pages/showcase.html
+++ b/docs/pages/showcase.html
@@ -10,8 +10,12 @@ permalink: /showcase/
   {% for s in site.data.showcase reversed %}
     <li>
       <a href="{{ s.url }}" target="_blank">
-        <img class="b-lazy" src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt="{{ s.name }}">
-        {{ s.name }}
+        <figure>
+          <div class="imageWrapper">
+            <img class="b-lazy" src="/img/spacer.gif" alt="{{ s.name }}">
+          </div>
+          <figcaption>{{ s.name }}</figcaption>
+        </figure>
       </a>
     </li>
   {% endfor %}