[Bug]: Placeholder doesn't follow the tag it covers

[jakubsob]

Guidelines

• [X] I agree to follow this project's Contributing Guidelines.

Project Version

0.0.0.9002

Platform and OS Version

Windows

Existing Issues

No response

What happened?

Placeholder doesn't follow the component it's supposed to cover when programatically changing it's location.

Steps to reproduce

1. Click Toggle panel button

Expected behavior

When #container1 is hidden #container2 slides into its place with a placeholder instead of sliding from underneath the placeholder.

Attachments

library(shiny)
library(shiny.emptystate)
library(bslib)

ui <- page(
  theme = bs_theme(version = 5),
  use_empty_state(),
  tags$button(
    "Toggle panel",
    class = "btn btn-primary",
    onClick = "$('#container1').toggle(anim = 'slide');"
  ),
  div(
    style = "width: 300px",
    class = "d-flex flex-column gap-5",
    div(
      id = "container1",
      div(
        h1("Card 1"),
        "Card content"
      )
    ),
    div(
      id = "container2",
      div(
        h1("Card 2"),
        "Card content"
      )
    )
  )
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is example empty state content"
  )
  empty_state_manager <- EmptyStateManager$new(
    id = "container2",
    html_content = empty_state_content
  )
  empty_state_manager$show()
}

shinyApp(ui, server)

Screenshots or Videos

https://github.com/Appsilon/shiny.emptystate/assets/37193264/22ffc244-56e7-4091-a22a-ec9797084f15

Additional Information

No response

[rszymanski]

Notes:

1. The ResizeObserver we are using does not report changes to the element's position. Potentially using the IntersectionObserver might allow us to catch changes of the position
2. Another option could be providing a JS function that users could call on their events to reposition the empty state e.g. extract this part of the code into a function

[rszymanski]

Given the fix attempt in https://github.com/Appsilon/shiny.emptystate/pull/42 this might be a bit of an edge case.

We figured out how to reposition an item, but if we want to things behave exactly as if there were actually in place of a given component (e.g. the sliding effect in the example in this issue), then I don't have an idea for a different way of handling it besides using renderUI.

What we could do is:

• [ ] Keep the JavaScript helper that allows users to trigger the reposition of the empty state component if needed
• [ ] Document the limitation (that the empty state is position absolutely and in some cases renderUI might be a better option)

Example Fix

library(shiny)
library(shiny.emptystate)
library(bslib)

ui <- page(
  theme = bs_theme(version = 5),
  use_empty_state(),
  tags$button(
    "Toggle panel",
    class = "btn btn-primary",
    onClick = "$('#container1').toggle(anim = 'slide');"
  ),
  div(
    style = "width: 300px",
    class = "d-flex flex-column gap-5",
    div(
      id = "container1",
      div(
        h1("Card 1"),
        "Card content"
      )
    ),
    div(
      id = "container2",
      div(
        h1("Card 2"),
        uiOutput("card_content")
      )
    )
  )
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is example empty state content"
  )
  
  output$card_content <- renderUI({
    empty_state_content
  })
}

shinyApp(ui, server)