I have a component (with 'use client') that renders on the UI, fetching information from the database. This component is a Sidebar, which not only offers menu options but also displays the "groups" I'm a part of in my software, akin to a social network. The Sidebar is split in half: the top 50% displays menu options, while the bottom 50% renders a list of groups where I'm a member/owner/admin, etc. Since both the menu options list and the groups list are interactive (clickable, maintain expanded menu state, route changes, etc.), I can't forego using 'use client'. However, this prevents me from making the component "async", and thus, on the page where I import and render it, I can't use "Suspense" to render a Skeleton while the component loads, leading to an empty space instead of rendering the fallback component in Suspense. I need advice on a recommended pattern for UI loading, as I'm unable to abstract the button click logic or break it down much. What's the best way to create loadings in Next.js 13/14 for small parts of a component? I can still achieve a loading effect by setting a loading state on the client-side component, but I wonder if there's a more "Next.js 13/14" way to do this.