Repeater slow hide

Ask the community
1

I am making a custom search bar for the header of my site. When there are search results, I try to display a container with a repeater inside containing the search results. Displaying of this container goes without problems, however when I try to hide the search result container, the container disappears first and the repeater contained inside after about half a second later…

Does a solution or workaround exist for this problem? I already tried to collapse it first but this just looks weird.

There are no adjustments or hover effects present on the container or repeater. This also happens regardless of adding the ‘fade’ effect to the hide function or not.

This is the code I use to show / hide the container.

// The code in this file will load on every page of your site
import { session } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;

//global element declarations
let $helloBar ;
const fadeOptions = {
“duration” : 300 ,
“delay” : 0
}

$w . onReady (() => {
//pageElements
$helloBar = $w ( ‘#helloBar’ )
const $searchBarInput = $w ( ‘#searchBarInput’ )
const $searchResultsContainer = $w ( ‘#searchResultsContainer’ )
const $searchResults = $w ( ‘#searchResult’ )
const $cancelSearch = $w ( ‘#cancelSearch’ )

if  ( session . getItem ( "showHelloBar" ) !==  "false" ) { 
    $helloBar . expand () 
} 

$searchBarInput . onKeyPress (( e ) => { 
    if  ( e . target . value . length  >  0 ) { 
        $cancelSearch . show ( 'fade' ,  fadeOptions ) 
    }  **else**  { 
        $cancelSearch . hide ( 'fade' ,  fadeOptions ) 
    } 
    if  ( e . target . value . length  >=  3 ) { 
        $searchResultsContainer . show ( 'fade' ,  fadeOptions ); 
    }  **else**  { 
        $searchResultsContainer . hide ( 'fade' ,  fadeOptions ); 
    } 
})

})

Below you can see a video of the effect.

2

Hey Thomas - I suggest asking this question in the Velo forum as they’re more familiar with code.

3

Thank you for your feedback, I have posted it on the velo forum as well. However to me this seems more like editor x element behaviour rather then a code problem.

4

Hey @thomas1675 , I’m guessing that show/hide using “fade” animation causes this behavior.
Please try using Wix Animations instead(code below), and if it still doesn’t help, share the url to your website so I can take a look.


// The code in this file will load on every page of your site
import { session } from 'wix-storage';
import wixData from 'wix-data';
import wixAnimations from 'wix-animations';

//global element declarations
let cancelSearch = wixAnimations.timeline();
let resultsContainer = wixAnimations.timeline();

let $helloBar;
const fadeOptions = {
    "duration": 300,
    "delay": 0
}

$w.onReady(() => {
    
    //pageElements
    $helloBar = $w('#helloBar')
    const $searchBarInput = $w('#searchBarInput')
    const $searchResultsContainer = $w('#searchResultsContainer')
    const $searchResults = $w('#searchResult')
    const $cancelSearch = $w('#cancelSearch')

    cancelSearch.add($cancelSearch, {"opacity": 1, "duration": 300});
    resultsContainer.add($searchResultsContainer, {"opacity": 1, "duration": 300});

    if (session.getItem("showHelloBar") !== "false") {
        $helloBar.expand()
    }

    $searchBarInput.onKeyPress((e) => {
        if (e.target.value.length > 0) {
            cancelSearch.play();
        } else {
            cancelSearch.reverse();
        }
        if (e.target.value.length >= 3) {
            resultsContainer.play();
        } else {
            resultsContainer.reverse();
        }
    })

})
5

Thank you for the advice. I will try this out and give some feedback to you if this works out or not, have a great day!