Fix case where load image starts as display: none

src/js/lib-x.ts

@@ -581,22 +581,24 @@ const libXUi = {
       // Usage:
       //    libX.ui.loadImageFadeIn(elem, 'https://example.com/elephants.jpg');
       const fadeTransition = duration ?? 600;
-      const goalElem = <HTMLElement>elem;
-      goalElem.style.transition = `all 0ms`;
-      goalElem.style.opacity =    '0';
+      const style =          (<HTMLElement>elem).style;
+      style.transition =     `all 0ms`;
+      style.opacity =        '0';
+      if (globalThis.getComputedStyle(elem).display === 'none')
+         style.display = 'block';
       const load = (done: (elem: Element) => void) => {
          const cleanup = () => {
-            goalElem.style.removeProperty('transition');
-            goalElem.style.removeProperty('opacity');
+            style.removeProperty('transition');
+            style.removeProperty('opacity');
             done(elem);
             };
          const handleImgage = () => {
-            if (goalElem.matches('img'))
-               (<HTMLImageElement>goalElem).src = url;
+            if (elem.matches('img'))
+               (<HTMLImageElement>elem).src = url;
             else
-               goalElem.style.backgroundImage = 'url("' + url + '")';
-            goalElem.style.transition = `all ${fadeTransition}ms`;
-            goalElem.style.opacity =    '1';
+               style.backgroundImage = 'url("' + url + '")';
+            style.transition = `all ${fadeTransition}ms`;
+            style.opacity =    '1';
             globalThis.setTimeout(cleanup, fadeTransition + 100);
             };
          const img = new Image();

src/js/spec-js.html

@@ -12,6 +12,7 @@
    <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css>
    <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/dna-engine.css>
    <link rel=stylesheet href=../../dist/reset.min.css>
+   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch-json.min.js></script>
    <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/dna-engine.min.js></script>
    <script defer src=../../dist/lib-x.min.js></script>
    <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
@@ -46,6 +47,13 @@
          globalThis.document.querySelectorAll('.montage-loop').forEach(
             holder => libX.animate.montageLoop(holder, { intervalMsec: 5000 }));
          };
+      const loadImage = (button) => {
+         const img = button.parentElement.nextElementSibling;
+         const handle = (data) =>
+            libX.ui.loadImageFadeIn(img, data.image, 5000).then(() => button.disabled = false);
+         img.parentElement.dataset.imageReuested = String(Date.now());
+         fetchJson.get('https://yesno.wtf/api').then(handle);
+         };
       const handleHash = (container) => (hash) => container.querySelector('output').textContent = hash;
       const hashIt = (elem) => libX.crypto.hash(libX.dom.migrate(elem).value)
          .then(handleHash(libX.dom.migrate(elem).closest('div')));
@@ -102,6 +110,11 @@ <h2>Specifications</h2>
          <img src=https://centerkey.com/paradise-galleries/console-demo/~data~/portfolio/004-small.png alt=montage>
          <img src=https://centerkey.com/paradise-galleries/console-demo/~data~/portfolio/019-small.png alt=montage>
       </aside>
+      <aside style="width: 150px; background-color: white; border: none; padding: 0px;">
+         <p><button data-on-click=loadImage>Load</button></p>
+         <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg=="
+            alt=placeholder>
+      </aside>
       <p class=display-addr data-name=sales data-domain=ibm.com></p>
       <hr>
       <div>