Multilingual with RTL page rendering delay

Ask the community
, ,
1

We have created a Wix multilingual website - English and Hebrew. Using multi-state boxes and JS we are managing the switch between English LTR and Hebrew RTL.
Here is an example of the code from one of the pages.
As the code is placed in the onReady function, the pages render before the code runs so the user sees an incorrect page first (wrong direction and incorrect text - it’s auto-translated text) before it changes to the right text and direction.
To see it happen visit our website - https://www.tendermind.ai/
Is there a way to solve this?

import wixWindow from ‘wix-window’ ;
const RTLLangs = [ ‘he’ , ‘ar’ , ‘fa’ ];

$w . onReady ( function () {
let lang = wixWindow . multilingual . currentLanguage ;
if ( RTLLangs . includes ( lang )){
$w ( ‘#statebox8’ ). changeState ( ‘RTL’ );
}
let states = $w ( ‘#statebox8’ ). states ;
let foundStates = states . filter (( state )=>{ state . id === lang });
if ( foundStates . length > 0 ){
$w ( ‘#statebox8’ ). changeState ( foundStates [ 0 ]);
}
else {
$w ( ‘#statebox8’ ). changeState ( ‘default’ );
}
});

2

You can make the page contents hidden on load, and show it once the $w is ready using code.

By the way (non-related),
Instead of:

let foundStates = states.filter((state)=>{state.id === lang});
//...
if(foundStates.length>0){
$w('#statebox8').changeState(foundStates[0]);
}

You can do:

const selectedState = states.find(state => state.id === lang);
//...
if(selectedState){
$w('#statebox8').changeState(selectedState);
}
3

Thank you J.D.
I’ve tried what you suggested, hiding the content on loading - that works and hides the content.
Then I put $w ( ‘#statebox8’ ). show ();
at the end of the onReady function and it didn’t help. In other words the page renders and shows LTR and only then switches to RTL.
I also tried putting the code outside the onReady function. It didn’t help.
Do you have any suggestions?

4

@michael33857 try to do it after changing the state:

$w('#statebox8').changeState(selectedState)
.then($w('#statebox8').show);
5

@jonatandor35
Edited to say I fixed the problem below (removed the ; from the previous line) but now it’s thrown up a different problem for which I’ll open a new message below.

I actually tried that already and I’m having a problem with .then throwing up an error
if ( RTLLangs . includes ( lang )){
$w ( ‘#statebox8’ ). changeState ( ‘RTL’ );
. then ( $w ( ‘#statebox8’ ). show );

    }

2016×1512 1.03 MB

Any idea why this is?

6

After solving the issue above by removing the semicolon I get the following errors. I tried show and show() and get different errors.
Note that we have improved the overall problem temporarily now using a timeout at the end of the $onReady before showing the element (multistate box) but it’s not an elegant solution and introduces a delay in the page rendering. It also doesn’t seem to work perfectly.

2016×1512 997 KB

2016×1512 789 KB

7

it should be $w('#statebox8).show without parenthesis. not $w('#statebox8).show ()
alternatively, you can do: .then(() => $w('#statebox8).show())

8

@jonatandor35 Thank you for your answer. I tried both .then($w(’ #statebox8 ').show) still throws up an error.
.then(() => $w(’ #statebox8 ').show()) doesn’t cause an error but the default (LTR) statebox appears each time before switching to the RTL one. In other words it doesn’t solve our original problem.

9

For now I have solved the problem with a timeout:
I placed setTimeout (()=> $w ( ‘#statebox8’ ). show (), 100 )
at the end of my code.
What’s rather strange is that it solved the problem when switching between languages but when I’m in the Hebrew site, moving between pages it still first shows the default statebox (which is LTR) and then only switches to the RTL statebox. I don’t know if this is a bug in Wix because I really cannot find a way to resolve this.
To see the problem please visit www.tendermind.ai and choose Hebrew. You’ll see that when switching from English to Hebrew on whichever page the timeout works but when moving between pages in Hebrew the hiding of the statebox and subsequent timeout to show the box doesn’t do anything. In fact I lengthened the timeout to a full 5 seconds to see if it would work and it made no difference. It’s as if the hidden state and the timeout don’t actually work although I set the hidden state directly on the statebox and checked that it shows as hidden both in English and Hebrew as well as for all statebox statuses.

Any thoughts on whether this is a Wix bug or if there is something I can do to fix this?

10

Sorry, I can’t tell. As a matter of fact I’ve never built a multi-language site on Wix, so I haven’t experienced this issue.

11

@jonatandor35 Thank you. I’ll raise a support request.

12

Hello
I see that you marked this thread as SOLVED.
Can you please share your solution? I have the same issue.

UPDATE, I solved the issue with this code

import wixWindow from 'wix-window';
const persianLang = 'fa';
$w.onReady(function () {
    let currentLang = wixWindow.multilingual.currentLanguage;
    //based on RTL
    if (currentLang === persianLang) {
        $w('#statebox').hide();
        $w('#statebox').changeState('RTL')
        .then(() => $w('#statebox').show());
    }
});