https://htmx.org logo
Powered by
# htmx-general
  • h
    with this event:
  • h
    Copy code
    const app = createApp({
  store,
  $delimiters: ['${', '}']
});
htmx.on("htmx:load", function(evt) {
  app.mount(evt.detail.elt);
});
  • h
    so I get a flash of like 
    ${ store.counter }
    before that gets flipped over to 
    4
    or whatever counter is
  • h
    I am boosting the whole app so page transitions work fine, although same problem
  • h
    beforeSwap would work everywhere EXCEPT the initial load right
  • h
    so let me try
  • g
    Yeah, this will happen with any client side app. One good way to handle it is to have a class that hides this content until Vie can process it.
  • h
    Copy code
    const app = createApp({
  store,
  GlobalCounter,
  Counter,
  $delimiters: ['${', '}']
});
app.mount(Body element)
htmx.on("htmx:beforeSettle", function(evt) {
  app.mount(evt.detail.elt);
});
  • g
    I haven’t done it, but you might try piggybacking on the htmx settling logic to hide things while they’re settling.
  • h
    hmm
  • g
    That would be a CSS class something like .htmx-settling {display:none;}
  • h
    visibility hidden yeah
  • h
    ic what you're thinking, then afterSettle fires and that's where we init vue
  • h
    and post that event the htmx settling class is pulled off
  • g
    But please, for the love of Odin, be put some extra selectors around that because EVERYTHING gets that class added to it now and then. I could imagine your whole app constantly flickering if that was applied globally.
  • h
    do you think the before settle approach won't work?
  • h
    that seems cleaner if it would work because then things just get added with the right values and I don't have to worry about toggling visibility
  • h
    I can test it if there's not an obvious reason
  • g
    I don’t know. It sure could. It would just take some digging in your specific app to see. There’s a lot of timing involved, and I haven’t had to dig into what’s actually happening at each step.
  • h
    yeah I'll give it a shot
  • g
    Gotta run. be back soon.
  • h
    Unless I misunderstand this, the beforeSwap event doesn't give access to the elt that's about to be inserted into the dom
  • g
    Hmmm. Check 
    event.target
    . Is it not there?
  • h
    detail.target - the target of the swap - in the docs, I read that as the hx-target dom element?
  • h
    let me try using event.target
  • h
    oh not event.detail.target
  • h
    but event.target
  • g
    I’m not sure. It’s in there somewhere. Try adding console.log(event) to your handler and rummaging through it 😅
  • h
    yeah I'm just poking at it in the dbugger
  • h
    so timing wise it looks like afterSwap works the best - when I use that I get 0 template jitter
1...436437438...1146Latest