Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

馃悰Bug: Slow to render a lot of components #129

Open
space-nuko opened this issue May 7, 2023 · 3 comments
Open

馃悰Bug: Slow to render a lot of components #129

space-nuko opened this issue May 7, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@space-nuko
Copy link

Describe the bug
I tried instantiating a lot of Sliders, it incurs a significant overhead on page load before anything can be interacted with

In contrast plain input components load instantly

To Reproduce

Set useRadix = false to compare

<script lang="ts">
 import { Slider } from 'radix-svelte';
 let value = 0;

 let useRadix = true;
</script>

<form>
    {#if useRadix}
        {#each Array(100) as _, i}
            <Slider.Root
                class="relative flex h-5
                       w-full touch-none select-none items-center
                       data-[orientation=vertical]:h-[200px]
                       data-[orientation=vertical]:w-5
                       data-[orientation=vertical]:flex-col
                       "
                value={[50]}
                min={0}
                max={100}
                step={1}
                name={"asd!"}
                disabled={false}
                aria-label="Volume"
            >
                <Slider.Track
                    class="relative grow rounded-full bg-black/50
                           data-[orientation=horizontal]:h-[3px]
                           data-[orientation=vertical]:w-[3px]"
                >
                    <Slider.Range
                        class="absolute rounded-full bg-white
                               data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
                    />
                </Slider.Track>
                <Slider.Thumb
                    class="block h-5 w-5 rounded-[10px] bg-white shadow-[0_2px_10px] shadow-black/10
                           hover:bg-vermilion-100 focus:shadow-[0_0_0_5px] focus:shadow-black/30 focus:outline-none"
                />
            </Slider.Root>
        {/each}
    {:else}
        {#each Array(100) as _, i}
            <input min={0} max={100} step={1} value={70} type="range" style="width: 100%;" />
        {/each}
    {/if}
</form>

Expected behavior
Components should take a reasonable amount of time to load

Screenshots
Performance graph
2023-05-07 11_32_18-http___localhost_3000_# - Chromium

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 110.0.5481.177
@space-nuko space-nuko added the bug Something isn't working label May 7, 2023
@TGlide
Copy link
Member

TGlide commented May 7, 2023

@space-nuko Thanks for raising this issue! Quickly testing on a Macbook M1 yields fast results, but I'll try on another PC later on.

Would you mind giving me your PC specs? It is expected for components to be slower than native HTML elements, but 2-3s is quite slow.

@space-nuko
Copy link
Author

AMD Ryzen 7 5800X 8-Core Processor 3.80 GHz with 64GB of RAM, RTX 3090

@TGlide
Copy link
Member

TGlide commented May 9, 2023

AMD Ryzen 7 5800X 8-Core Processor 3.80 GHz with 64GB of RAM, RTX 3090

Thank you for sharing, I'll look into this

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants