Progressively loaded content

[charlieglnp]

Loving the progressively loaded content - not an option I had played with before!

However it throws up an interesting issue for long running queries. I have a page with a simple search form, a single entry and button, with results displayed in a table below the form (all in the same sql file). The query can take a few seconds to run and it can appear like nothing is happening/no results have been found when compress_responses is set to false because the chrome is so quick to load. With compress_responses set to true, the blank page makes it more obvious something is happening, and something is going to happen.

The obvious option is to embed the table in a card, which works well with its spinner, but it seems overkill for a simple form. For more complex pages I suppose it would encourage you to break it up in smaller more manageable files.

I'm going to have a play around to see what works best but I was wondering if anyone has any usability/UX/UI suggestions for this sort of scenario?

[olivierauverlot]

I have the same problem with an application I'm developing. The database is not very well designed and the volume of data is significant. Some pages are slow to load for the client. To solve the problem, I chose to create a very small component called lazy, which is a highly simplified card.

<div {{#if id}}id="{{id}}"{{/if}} class="row gx-2 gy-2 mt-1 mb-3 {{class}}">
    <div class="card h-100 bg-transparent border-0" data-pre-init="card" data-embed="{{embed}}">
        <div class="card-body p-0">
            <div class="card-content remove-bottom-margin"></div>
                <div class="d-flex justify-content-center h-100 align-items-center card-loading-placeholder">
                    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here's an example of use:

SELECT 
    'lazy' AS component,
    'slow_page.sql?_sqlpage_embed' AS embed

I agree with you, it's not optimal, but it works very well and the user doesn't see the trick.

Best regards

[lovasoa]

I summarized the various possible performance issues and possible solutions here: https://sql-page.com/blog.sql?post=Performance%20Guide

[charlieglnp]

Yes, I think the lazy component is the best solution at the moment - its going to require a shift in mindset for me I think from "monolithic" to "micro", pulling out the long running/main queries into their own files. This makes things much more maintainable and reusable and I was probably going to have to do this anyway as my main project gets more and more complex, so no bad thing!

I'm also experimenting with other ways of indicating to the user the page is still loading eg nprogress style status indicators, skeleton layouts.

[charlieglnp]

Just in case this is of anyone use to anyone else, a simple Github style page load indicator does the job nicely I think e.g.

select 'html' as component, '<div id="initial-loading-bar"></div>' as html;

#initial-loading-bar {
  position: fixed;
  top: 0;
  left: 270px;
  height: 6px;
  background-color: #ecf0f1;
  width: calc(100% - 270px);
  z-index: 9999;
  overflow: hidden;
  opacity: 1; 
  transition: opacity 0.5s ease-out; 
}

#initial-loading-bar::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #3498db;
  transition: width 0.3s cubic-bezier(0.1, 0.7, 1.0, 0.1), 
              opacity 0.5s ease-out;
  animation: slow-creep 30s forwards; 
}


#initial-loading-bar.__finished {
  opacity: 0; 
  pointer-events: none;
}

#initial-loading-bar.__finished::before {
  width: 100%; 
  opacity: 0; 
}

@keyframes slow-creep {
  0% { width: 0%; }
  90% { width: 95%; } 
  100% { width: 95%; }
}

document.addEventListener('DOMContentLoaded', function() {
    window.onload = function() {
        const loadingBar = document.getElementById('initial-loading-bar');
        
        // Add the finished class to trigger the 100% jump and fade-out
        if (loadingBar) {
            loadingBar.classList.add('__finished');
        }
    };
});