1

We have a VisualForce page which is used to be the config page for a managed package, there we have a lot of logic, and everything worked fine before adding an LWC using the lightning out. All the code is still working fine, the thing that is not showing now is a spinner, and when we try to add more elements on the DOM.

Is anything I'm missing on the lightning out, which is causing these problems? Is it because the LWC is another spinner?

Ps.: on the code when I use jquery to find the element it is being found but when I try to show it is not showing, and if I remove the lightning.use to add the LWC to the DOM it works fine.

here part of the code:

<apex:page controller="customController" cache="false" standardStylesheets="FALSE" sidebar="false" showHeader="false" applyHtmlTag="false"
    applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

 <head>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" />
        <title>title</title>
        <apex:slds />

    </head>
    <apex:includeLightning/>

    <body class="slds-scope">
       <div class="slds-page-header" role="banner">

            <div class="slds-spinner_container slds-hide">
                <div class="slds-spinner--brand slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
       </div>

        <div id="CUSTOMID" class="slds-grid">
            <div class="slds-col slds-large-size--3-of-12 slds-p-top_large slds-p-right_medium slds-p-left_medium">
                <div id='IDTORENDERLWC'></div>
            </div>
        </div>
    </body>
<script type="text/javascript">
        var j$ = jQuery.noConflict();
        function callControllerMethod() {
            j$('.slds-spinner_container').show();

            Visualforce.remoting.Manager.invokeAction(
                hidden,
                hidden,
                hidden,

                function (result, event) {
                    if (event.status) {
                        hidden = '/' + result[0].Id;
                        hidden = '/' + result[1].Id;

                        j$('.slds-spinner_container').hide();
                        // j$('#hidden').show();
                        // j$('#hidden').hide();
                    }
                },
                { escape: false }
            );
        }

        $Lightning.use("c:hidden", function () {
            $Lightning.createComponent('c:hidden', {}, 'IDTORENDERLWC', function (cmp) {
            })
        });
        </script>

    </html>
</apex:page>

2 Answers 2

1

You are using jQuery to do a pretty trivial thing that you can do with plain Javascript. Try removing jQuery and showing your component like this:

function setSpinnerVisible(show) {
    const spinner = document.querySelector(".slds-spinner_container");
    spinner.style.display = show ? "block" : "none";
}

Then call that in place of the jQuery call:

setSpinnerVisible(true); //or false

Then you can also remove the jQuery static resource import and speed your page load up too.

2
  • Thank you for the answer, but the problem still persist, I got your idea of remove jQuery, but this page is really bigger than that, just showing the important part of it. Commented Jun 12, 2023 at 15:20
  • I think that's worth an upvote Commented Jun 12, 2023 at 19:13
1

Well, I found out the solution, following the tip from @Caspar Harmer I've removed the jQuery from it, but what really solved it was adding and removing the slds-hide class:

    function setSpinnerVisible(show) {
            const spinner = document.querySelector(".slds-spinner_container");
            if(show) spinner.classList.remove('slds-hide');
            else spinner.classList.add('slds-hide');
        }

My guess is, after adding the LWC to the VF page, the LWC spinner code added, to all spinners on the page, the slds-hide class, not sure if this is true but this is how I thought to try this solution.

Thank you all.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .