[Feature]: @suspensive/skeleton new package

[manudeli]

Package Scope

etc

Description

@suspensive/react-skeleton new package

Possible Solution

No response

etc.

No response

[gwansikk]

I've always had many concerns about the fallback skeleton to use with suspense. This is a great challenge!

[Collection50]

I think it's such a awesome feature needed for suspense! I want to contribute !!

[manudeli]

I think it's such a awesome feature needed for suspense! I want to contribute !!

@gwansikk @Collection50 Idea is more required for now. I want to dig why @suspensive/skeleton could be good package first.

[gwansikk]

I think it's such a awesome feature needed for suspense! I want to contribute !!

@gwansikk @Collection50 Idea is more required for now. I want to dig why @suspensive/skeleton could be good package firt.

I have always been unsure about which fallback to use when using Suspense. Skeleton, Spinner, etc... There are various options, but I haven't found an efficient way to structure Skeleton. (according to each case)

In this regard, it would be great if Susensive could create and suggest standardization and best practices for Skeleton. (Since Susensive is a package for gracefully handling Suspense, I believe it would be beneficial to also suggest elegant ways to handle Suspense fallbacks.)

[ojj1123]

I have always been unsure about which fallback to use when using Suspense. Skeleton, Spinner, etc... There are various options, but I haven't found an efficient way to structure Skeleton. (according to each case)

@gwansikk

When I need skeleton, I used to use UI components libraries such as MUI, Chakra-ui so on. I feel like which fallback to use, is depending on UI requirements.

I'm wondering what the problem you faced when using skeleton. And what you want this package to do? I'm just curious!

[manudeli]

Me too, I have difficult to define what problem we should solve exactly. If we simply provide UI, I don't know if that's our role.

[ojj1123]

If we simply provide UI, I don't know if that's our role.

Yeah I agree with you. I think that you guys would rather provide this new package that can get synergy with other suspensive packages than UI components.

[gwansikk]

@manudeli @ojj1123

1. Many UI libraries do not provide skeleton components.
2. Even the packages that do provide skeletons mostly have similar designs. Standardizing them could be a good idea.
3. A fallback option also seems necessary. For example, on Android, a loading indicator is shown until the data arrives, and a minimum loading time (e.g., 1s) is specified to prevent "layout shifts" if the data fetching is very fast. (This ensures a smooth user experience.) A similar approach might be needed for the web environment.

Of course, the choice of fallback components is undoubtedly up to the users. Additionally, it may not be our responsibility to define this. However, what I expect from Suspensive is to handle Suspense gracefully. As part of Suspense, I hope better options for fallback will also be provided.

[manudeli]

@manudeli @ojj1123

3. A fallback option also seems necessary. For example, on Android, a loading indicator is shown until the data arrives, and a minimum loading time (e.g., 1s) is specified to prevent "layout shifts" if the data fetching is very fast. (This ensures a smooth user experience.) A similar approach might be needed for the web environment.

Good idea, in my opinion, It could be solved like below interfaces.

const Example = () => {
  return (
    <Suspense fallback="loading...">
      <GuaranteeSuspenseTime ms={1000} />
      <SuspenseQuery ...{userQueryOptions}/> // 100ms loading time
    </Supense>
  )
}

I'm consider it as DevMode's features or others in https://github.com/toss/suspensive/issues/1062

[ojj1123]

3. A fallback option also seems necessary. For example, on Android, a loading indicator is shown until the data arrives, and a minimum loading time (e.g., 1s) is specified to prevent "layout shifts" if the data fetching is very fast. (This ensures a smooth user experience.) A similar approach might be needed for the web environment.

I don't know if I get it exactly, but can this problem be solved using Delay component?

https://suspensive.org/ko/docs/react/Delay

[ojj1123]

Oh, I misunderstand what that problem is. As I get Delay component, it's used to delay fallback component if data fetching is so fast. That is, If data fetching is just completed in 100ms, fallback can lead to "flash" loading indicators.

If setting a specific loading time, it seems to prevent LS. But using Delay component can mitigate flickering in fast data fetching as a workaround. It feels like that the role of setting a minimum loading time and the role of Delay are opposite.

[manudeli]

We now close as not planned. if we define problem to solve it, at that time reopen it please