[Murat]

3 years, 4 months ago #23172

i came across a usablity issue when growing my site using a mobile device,
whereas when I apply product filters, I could see a static white overlay – but cannot see the loader icon as it is way down the virtual center of the shop div element off screen
the user may think that the site is stuck, as he has to wait few seconds while the WPSOLR fetches and applies and filtered results…
i though that by giving a better visual clue to the site visitor, by replacing the loader gif with a wavy animated css gradient – this brings more life and visual cue to the visitor
how can we achieve that – is there any css shortcut?

[wpsolr]

3 years, 4 months ago #23173

WPSOLR is using the jQuery plugin https://gasparesganga.com/labs/jquery-loading-overlay/
Let me know if you have ideas.

[Murat]

3 years, 4 months ago #23175

i tried overriding the css style for the div.overlayloader – but it did not work, as it was always -by-design of that juqery plugin having its css defined as inline.
to make it easy I edited the main js file as follows

var _defaults = {
color : “rgba(255, 255, 255, 0.8)”,
custom : “”,
fade : true,
fontawesome : “”,
image : “…..”
imagePosition : “top left”, // <<<<<<<<<<<<<<
maxSize : “100px”,
minSize : “20px”,
resizeInterval : 50,
size : “50%”,
zIndex : 9999
};
==============
Alternatively, I have commented out the no-repeat property::

if (settings.image) overlay.css({
“background-image” : “url(” + settings.image + “)”,
“background-position” : settings.imagePosition,
// “background-repeat” : “no-repeat”
});

[mcl7]

3 years, 4 months ago #23177

I am having a problem with this is as well. It would be ideal to center the loading icon on the screen instead of what appears to be it being centered in the results.

[wpsolr]

3 years, 4 months ago #23179

Currently, the loader is centered on the results section.

I could add a “loader” jQuery selector setting in the “Theme”, so you can apply the loader to the section you prefer (you can simulate this feature by changing the jQuery results selector)

Would it work for both of you?

[mcl7]

3 years, 4 months ago #23185

That would be great!

[wpsolr]

3 years, 4 months ago #23194

Here is a pre-release of this feature (overlay jQuery selector on the “Theme” add-on): https://trello.com/c/3h4Q8swl/122-add-a-jquery-selector-for-the-ajax-overlay-on-the-theme-add-on

[wpsolr]

2 years, 8 months ago #27496

Included in https://www.wpsolr.com/forums/topic/release-22-1/