Wix Visual Glitch After Minify

Question

So i have been building a Website on Wix for a while. i work with alot of iFrames and Velo. Today i decided to to minify everything which made the Site way faster, however switching Tabs on my Tabbed Site sometimes (not every time and kinda random) causes a visual Glitch where within a split second the Tabs switch multiple times before the Final Tab is shown. Basically if i go from tab A to B it might do A->B->A->B super fast, barely visible but still irritating.

First i tried to set a timeout before Pageload which didnt fix the Glitch, then i also tried using the Unminified Code for the Menu + Site Code but it still does the same Glitch now.

Background: -My Site uses Wix #Tabs to split Content into Sections. -Each Section is filled with HTML iFrames mostly. -I Created a Custom TabMenu using an iFrame, which posts a message with the TabID to my Site when a Item is selected -My Site Code then hides the Menu and triggers a TabChange + updates breadcrumbs. -also theres a button to open the menu

I know the Approach isnt optimal but it works well, or atleast did until today. Heres the Frontend Snippet that Handles everything on the Message.

let lastTabId = null;
let debounceTimeout = null;
$w.onReady(function () {
 const Ticker = session.getItem("selectedTicker");
 const companyName = session.getItem("selectedCompanyName");
 const tabMap = {
 "#singleTab4": ["Company Snapshot", "Overview"],
 "#singleTab12": ["Company Snapshot", "Company Profile"],
 "#singleTab8": ["Company Snapshot", "News"],
 "#singleTab6": ["Market & Valuation", "Valuation / Forecast"],
 "#singleTab5": ["Market & Valuation", "Volatility"],
 "#singleTab15": ["Financial Health", "Financials"],
 "#singleTab24": ["Financial Health", "Profitability"],
 "#singleTab9": ["Ownership & Sustainability", "ESG Score"],
 "#singleTab14": ["Ownership & Sustainability", "Holding Structure"],
 "#singleTab16": ["Ownership & Sustainability", "Dividends"],
 "#singleTab21": ["Filings & Insider Data", "Financial Statements"],
 "#singleTab10": ["Filings & Insider Data", "SEC Filings"],
 "#singleTab17": ["Filings & Insider Data", "Insider Activity"],
 "#singleTab13": ["Strategic Analysis", "SWOT Analysis"],
 "#singleTab22": ["Strategic Analysis", "PESTEL Analysis"],
 "#singleTab23": ["Strategic Analysis", "Porters 5 Forces"],
 "#singleTab19": ["Strategic Analysis", "Scenario Analysis"],
 "#singleTab18": ["Advanced Tools", "Monte Carlo"],
 "#singleTab20": ["Advanced Tools", "Custom Ratios"],
 "#singleTab25": ["Advanced Tools", "AI Analysts"],
 "#singleTab26": ["Advanced Tools", "Compare"]
 };
 // Set initial breadcrumb
 $w("#html115").postMessage({
 breadcrumb: `<span style="color:#fd6262;font-weight:500;">${Ticker}</span> > Company Snapshot > Overview`
 });
 // Toggle menu iframe visibility
 $w('#button5').onClick(() => {
 const iframe = $w('#html113');
 iframe.hidden ? iframe.show() : iframe.hide();
 });
 // Handle messages from the menu iframe
 $w('#html113').onMessage(event => {
 const data = event.data;
 if (data?.type === "selectTab") {
 const tabId = data.tabId;
 const hideMenu = data.hideMenu;
 if (tabId !== lastTabId) {
 clearTimeout(debounceTimeout);
 debounceTimeout = setTimeout(() => {
 lastTabId = tabId;
 $w("#tabs1").changeTab($w(tabId));
 const [category, tabName] = tabMap[tabId] || ["Unknown Category", "Unknown Tab"];
 $w("#html115").postMessage({
 breadcrumb: `<span style="color:#fd6262;font-weight:500;">${Ticker}</span> > ${category} > ${tabName}`
 });
 if (hideMenu) {
 $w('#html113').hide();
 }
 }, 60); // Added this in trying to resolve the issue, does nothing
 }
 }
 });
});

• mplungjan: Please click edit add use the snippet editor [<>] or [<>▶] depending on what editor SO shows you. Create a minimal reproducible example with RELEVANT HTML, CSS, JS and frameworks