showLoadingIndicator and SVG sprites

[claudiobosticco]

Hello, I'm trying to use an SVG like this: https://fontawesome.com/icons/spinner?f=classic&s=solid

for the FL.showLoadingIndicator, but it doesn't seem to work. Is the showLoadingIndicator supposed to work with SVG sprites?

[Isomorphic]

hi Claudio,

The SVG spriting system is actually quite a bit of code, and we don't want to incorporate that into the FileLoader, which is meant to be very tiny, so that it can be inserted into a context like a plain HTML login page and start loading SmartClient resources & your application code in the background.

However, you can do what you want pretty easily with a regular .svg file.

If you download FontAwesome's "spinner-solid.svg", you could animate it and apply it to the FL loadingIndicator with code like this below - note that ChatGPT can help with generating keyframes for different animation effects

// CSS
.spinner {
    width: 30px;
    height: 30px;
}

.spinner img {
    width: 100%;
    height: 100%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
     transform: rotate(0deg);
    }
    100% {
     transform: rotate(360deg);
    }
}


// JS

isc.FL.loadingIndicatorSettings.style = "spinner";
isc.FL.loadingIndicatorSettings.image = "spinner-solid.svg";
isc.FL.loadingIndicatorSettings.imageWidth = 30;
isc.FL.loadingIndicatorSettings.imageHeight = 30;

isc.FL.showLoadingIndicator();

[claudiobosticco]

Hello, sounds fair about the FileLoader, and thanks for the hint, works nicely

[claudiobosticco]

Hello, when using FL.showLoadingIndicator, I noticed that on mobile devices, both iPad and iPhone, and in both landscape and portrait orientations, it shows not centered.
Instead, it appears to be positioned about 70% from the left.
I believe the code configures it to be 45% from the left, so I'm not sure what's going on.

Is this something you can fix, or do I need to change my approach?

[Isomorphic]

hi Claudio - we've corrected an order-of-operations issue in this code that could potentially apply sizes to the <img> tag after loading had been initialized by its src attribute being set. That change should be in today's builds, dated July 27, and may address your issue.

In the meantime - can you confirm a few things?

1) which browser - is it Safari only? Do you see the issue in browser emulators?
2) do you see this with a regular PNG or is it just with SVG?
3) if it's SVG-only, is your config the same as shown above?

[claudiobosticco]

Hi Isomorphic, I didn't though to try Safari on desktop...

1) it happens with Safari, both on desktop and mobile (also iOS emulator on MacOS). On a physical iOS device (iPhone 8) happens also with Chrome. Doesn't happen with iOS emulator in Firefox.
2) it doesn't happen with a PNG
3) my config:

<script type="text/javascript" charset="UTF-8">
        isc.FL.loadingIndicatorSettings.style = "loadingIndicator";
        isc.FL.loadingIndicatorSettings.image = "images/spinner-solid.svg";
        isc.FL.loadingIndicatorSettings.imageWidth = 30;
        isc.FL.loadingIndicatorSettings.imageHeight = 30;
        isc.FL.loadingIndicatorSettings.message = isc.Browser.isTouch ? "" : " Loading...";
        isc.FL.showLoadingIndicator();
    </script>

Unfortunately today's build doesn't fix the problem.

[Isomorphic]

Thanks - can you show your CSS style? In fact, testing without setting a style at all might point to an issue with the styling.

Separately, it's not clear that setting message to "" causes a problem, but the code as is will still create a text-node for the message element for that value - if you set it to null, that extra text-node won't be created.

[claudiobosticco]

Hello, now I feel dumb to not have tried twerking the css before. Actually I started with what you suggested in post #2, which worked pretty well, if I use it without the loadingIndicator message.
Then I tried to add a message and I got this (ignore the background):



So I added some more CSS (the js config is in post #6):

        .loadingIndicator {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
        }

        .loadingIndicatorImage {
            padding: 8px;
        }

        .loadingIndicatorText {
            color: #282828;
            font-family: Roboto, calibri, Sans-Serif;
            font-size: 20px;
            padding: 8px;
        }

        .loadingIndicator img {
            width: 100%;
            height: 100%;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

and this gives those problems in Safari.

Note that the loadingIndicator style hasn't a width. This is because at the time I tried something like 40px and noticed that in Firefox the spinner won't show. It's because it becomes too small, it requires at least 160px.

I didn't try Safari desktop (by now you should have understood that I'm not a fan), so didn't notice the positioning issue.

Now I've tried with a width, but I'm noticing that, for a certain width value, the resulting size and position depends on browser and Page size.

Please let me know if it's something you may take care of in the showLoadingIndicator method, or if it actually requires some CSS hack; I may also simply ditch the message, as at this point I think I've already wasted enough of your time.

[Isomorphic]

So, what are you looking for? The icon and the message, ideally? It seems pretty clear from the screenshot that the icon is being rendered at a size larger than it's container's settings thinks its going to be, hence it's overflowing and overlapping the text.

Are you really looking to show both icon and text if you can?

[Isomorphic]

A follow up - this comment is interesting: "Note that the loadingIndicator style hasn't a width. This is because at the time I tried something like 40px and noticed that in Firefox the spinner won't show. It's because it becomes too small, it requires at least 160px."

The browser default-size for SVG with no specified size is 300 x 150, in all browsers as far as we know. Until today, it was possible that this particular image could be loaded before its sizes were applied - the change we made this morning should have addressed that, although it's possible the checkin was too late for the build-cutoff for today's build.

However - reading your CSS, the problem here is probably that the style being applied to the actual image, .loadingIndicatorImage, has no sizes - if you apply your image sizes in that class, that will likely fix the issue.

[claudiobosticco]

So, what are you looking for? The icon and the message, ideally? It seems pretty clear from the screenshot that the icon is being rendered at a size larger than it's container's settings thinks its going to be, hence it's overflowing and overlapping the text.

Are you really looking to show both icon and text if you can?

Ideally, yes. Now I've tweaked a little the CSS from post #2 with good results:

.spinner {
            width: 160px;
            height: 40px;
            font-size: 18px;
            font-family: Roboto, sans-serif;
        }

        .spinner img {
            width: 30px;
            height: 25px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }