Pre-loader - Desktop vs Mobile

Pre-loader - Desktop vs Mobile

My pre-loader works great on desktops and and laptops.
I have 2 divs

<div dmx-show=""> Has content </div>

<div dmx-hide=""> No content </div>

So the pre-loader does it thing… and then only show the DIV with the content as needed and works great on my desktop and laptop.

But on my mobile device it will do the pre-loading
Then for a split second show the … No Content div… then half a second later the content div.
I want to avoid showing the div with “No Content” on mobile… needing the pre-loader to “show” a bit longer before rendering the page.

The question is… is there is way to extent the pre-loader for say a second on a mobile device only?? as a quick solution? As i want all the div’s to load before the pre-loader disappear… seems fine on desktop only on my mobile… @Teodor

add maybe something to add maybe a delay on the dmxPreloader.js on mobile?

Please check out

I know this is something simple, but is there anybody that can help please? Or just a temp solution? For this not to happen on a mobile… or another way to approach this please?

Can you tell me the exact name of the data view you are checking? I can’t find one called itemsdataview on your page?

<div dmx-hide="">


<dmx-serverconnect id="latestauction" url="/api/FrontEnd/auctions_upcoming" sockets="true"></dmx-serverconnect>
<dmx-data-view id="latestauctiondateview" dmx-bind:data="" ...

on desktop the timing of the pre-loader is perfect… it just on mobile… weird… that is why I’m stuck with no answer in my brain :slight_smile: … its like a split second…

Thank you for having a look…

Does it make any difference if you change the expressions to:

dmx-show="!latestauction.state.executing &&"


dmx-hide="!latestauction.state.executing && !"

don’t forget to clear the cache when testing. Or test in an incognito window.

Thank you… let me give that a go :slight_smile:

Not doing the trick on mobile…

what im going to do… for a solution now…

Keep the current div show it with boostrap class on large devices.

Then on mobile, have another div bootstrap class on small devices and delay it with 1 second :slight_smile:

Thanks for the help again Teodor … could just be that my “mobile” is a “crap” one with slow rendering speeds…

Update! the solution for mobile for now… not the correct way i want it to work… but a quick patch :slight_smile:
I have just used a class to hide the div for a few seconds… but would be great if we can maybe add 1 second delay on the dmxPreloader.js before it shows the content just for “lower end mobile” devices… … anyway … trust Patrick will have a solution for me that is correct.

Maybe somebody can help to add a delay or a timeout just so the pre-loader shows a second longer …

    document.addEventListener("DOMContentLoaded", function () {
        window.requestAnimationFrame(function () {
    dmx.Component("preloader", {
        constructor: function (e, t) {
            (this.docLoaded = !1), (this.imgLoaded = !1), (this.dataLoaded = !1), (this.loaded = !1),, e, t);
        attributes: { preview: { type: Boolean, default: !1 }, color: { type: String, default: "#333" }, bgcolor: { type: String, default: "#fff" }, size: { type: Number, default: 60 }, spinner: { type: String, default: null } },
        methods: {
            show: function () {
            hide: function () {
        event: {},
        spinners: { rotatingPlane: 0, doubleBounce: 2, wave: 5, wanderingCubes: 2, pulse: 0, chasingDots: 2, threeBounce: 3, circle: 12, cubeGrid: 9, fadingCircle: 12, foldingCube: 4 },
        render: function (e) {
            if (
                this.$"--color", this.props.color),
                this.$"--bgcolor", this.props.bgcolor),
                this.$"--size", this.props.size + "px"),
                this.props.spinner && this.spinners.hasOwnProperty(this.props.spinner))
            ) {
                for (var t = '<div class="dmxPreloader-spinner dmxPreloader-' + this.props.spinner + '">', o = 0; o < this.spinners[this.props.spinner]; o++) t += "<div></div>";
                (t += "</div>"), (this.$node.innerHTML = t);
                window.addEventListener("load", function () {
        update: function (e) {
            this.loaded ||
                this.props.preview ||
                (JSON.stringify(e) != JSON.stringify(this.props) &&
                    (this.$"--color", this.props.color), this.$"--bgcolor", this.props.bgcolor), this.$"--size", this.props.size + "px")),
                this.docLoaded &&
                    this.imgLoaded &&
                    this.dataLoaded &&
                        function () {
                            this.loaded || (this.checkDocLoaded(), this.checkImgLoaded(), this.checkDataLoaded(), this.docLoaded && this.imgLoaded && this.dataLoaded && (this.hide(), (this.loaded = !0)));
        show: function () {
            this.$"opacity"), this.$"z-index"),"overflow", "hidden");
        hide: function () {
            this.$"opacity", 0), this.$"z-index", -1),"overflow");
        checkDocLoaded: function () {
            this.docLoaded = "complete" === document.readyState;
        checkImgLoaded: function () {
            this.imgLoaded = dmx.array(document.getElementsByTagName("IMG")).every(function (e) {
                if ((!e.hasAttribute("src") && e.hasAttribute("dmx-bind:src") && (e.isLoaded = !1), e.isLoaded === !0)) return !0;
                if (e.completed && 0 !== e.naturalHeight) return !0;
                if (!e.isListening) {
                    var t = new Image();
                    t.addEventListener("load", function () {
                        (e.isLoaded = !0), dmx.requestUpdate();
                        t.addEventListener("error", function () {
                            (e.isLoaded = !0), dmx.requestUpdate();
                        (t.src = e.src),
                        (e.isListening = !0);
                return e.isLoaded;
            }, this);
        checkDataLoaded: function () {
            this.dataLoaded = this.getDatasets().every(function (e) {
                return null !=;
        getDatasets: function () {
            var e = [];
            return (
       t(o) {
                    "serverconnect" !=$type || o.props.noload || e.push(, o.children.forEach(t);

have tried to add a setTimeout(function(){ and a .delay(1000) to the hide: function () { function … but clearly im to stupid to figure this one out :slight_smile:

@Teodor … could you possibly help?
Just to make sure the pre-loader only “hides” after all the content is loaded fully on mobile…
It disappears just a bit to “quickly” … could you help by looking at the above js for a “hack”… please.

Sorry but i cannot really help here, you can’t “just add” 1 second to the preloader. The solution i provided here should have improved the problem:

But i can’t recreate it locally.

that is the thing… it works on desktop… and hard to create it locally but on my mobile and hosted with DO… as it might be faster your side… but here in South Africa… the pre-loader disappears before the “data” is rendered / loaded… :frowning: :frowning: hard to show you… will have to take a video from another mobile device…

But as said it could be my mobile “performance” as you dont see a delay on your mobile?