Skip to content

๐Ÿฆดย ย Skeleton Placeholder

Submitted by Lukas Masuch

Summary

A single-element container which displays a skeleton placeholder.

Functions

skeleton

Insert a single-element container which displays a "skeleton" placeholder.

Inserts a container into your app that can be used to hold a single element. This allows you to, for example, remove elements at any point, or replace several elements at once (using a child multi-element container).

To insert/replace/clear an element on the returned container, you can use with notation or just call methods directly on the returned object.

Parameters

height: int or None Desired height of the skeleton expressed in pixels. If None, a default height is used.

Source code in src/streamlit_extras/skeleton/__init__.py 
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@extra
def skeleton(height: int | None = None) -> DeltaGenerator:
    """
    Insert a single-element container which displays a "skeleton" placeholder.

    Inserts a container into your app that can be used to hold a single element.
    This allows you to, for example, remove elements at any point, or replace
    several elements at once (using a child multi-element container).

    To insert/replace/clear an element on the returned container, you can
    use ``with`` notation or just call methods directly on the returned object.

    Parameters
    ----------
    height: int or None
        Desired height of the skeleton expressed in pixels. If None, a
        default height is used.
    """
    if hasattr(st._main, "_skeleton"):
        return st._main._skeleton(height=height)
    else:
        raise Exception(
            "The skeleton container is not supported in this Streamlit version."
        )

Import:

from streamlit_extras.skeleton import skeleton # (1)!
  1. You should add this to the top of your .py file ๐Ÿ› 

Examples

example

def example():
    st.write("This is the main container")

    # Example 1: Basic usage
    skeleton_container = skeleton()
    tall_skeleton = skeleton(height=200)

    if st.button("Fill skeleton container"):
        skeleton_container.write("This is content in the skeleton container")
        tall_skeleton.dataframe(
            {
                "A": [1, 2, 3],
                "B": [4, 5, 6],
            }
        )
Output (beta)