u/CodeKuro

Hello everyone, I am trying to learn wix and am making a menu for a restaurant. I made a cms collection of food items, gave each item a category and then connected repeaters to that collection. My goal is to be able to filter food categories with these buttons but it is very slow as you can see. Also I am using the following code to achieve this behavior and I am curious is there a better way of doing this that will yield better performance or I did something wrong.

import wixData from 'wix-data';


$w.onReady(function () {


    // Default filter = Predjela
    filterCategory("Predjelo");


    // Active izgled default gumba
    setActiveButton($w('#btnPredjela'));


    // BUTTON EVENTS


    $w('#btnPredjela').onClick(() => {
        filterCategory("Predjelo");
        setActiveButton($w('#btnPredjela'));
    });


    $w('#btnGlavnajela').onClick(() => {
        filterCategory("Glavno jelo");
        setActiveButton($w('#btnGlavnajela'));
    });


    $w('#btnDeserti').onClick(() => {
        filterCategory("Desert");
        setActiveButton($w('#btnDeserti'));
    });


});


// FILTER FUNCTION


function filterCategory(category) {
    $w('#repeaterMenu').hide();


    $w('#menuDataset').setFilter(
        wixData.filter().eq("category", category)
    ).then(() => {
        $w('#repeaterMenu').show("fade");
    });
}


// ACTIVE BUTTON STYLE


function setActiveButton(activeButton) {


    const buttons = [
        $w('#btnPredjela'),
        $w('#btnGlavnajela'),
        $w('#btnDeserti'),
    ];


    buttons.forEach(button => {


        button.style.backgroundColor = "#2F4A38";
        button.style.color = "#F6F0E6";


    });


    activeButton.style.backgroundColor = "#C9A45C";
    activeButton.style.color = "#2E2B2B";


}