SapphicMoe commented 10 months ago

Astro Info

Astro                    v4.1.1
Node                     v20.10.0
System                   Linux (x64)
Package Manager          pnpm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/tailwind
                         @astrojs/markdoc
                         @astrojs/react
                         keystatic
                         astro-icon
                         @astrojs/sitemap
                         astro-compress
                         astro-worker-links
                         simple-stream

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I'm trying to fetch data from a server:

components/home/Status.astro:

---
import { format, formatDistance } from 'date-fns';

interface StatusResponse {
  status: {
    title: string;
    body: string;
    date: string;
  };
}

const response = await fetch('https://status.solstice.tf');
const { status }: StatusResponse = await response.json();

const timeDistance = formatDistance(new Date(status.date), new Date(), { addSuffix: true });
const timeTitle = format(new Date(status.date), 'E, MMM do yyyy, HH:mm:ss');
---

<div class="flex flex-col gap-y-2 rounded-md border border-ctp-pink bg-ctp-base p-5">
  <h1 class="text-2xl">Current status:</h1>

  <div>
    <h3 class="text-2xl font-bold">{status.title}</h3>
    <p>{status.body}</p>
    <time class="text-base text-ctp-subtext0" title={`${timeTitle} in your locale`}>{timeDistance}</time>
  </div>

  <p class="text-base">Powered by <a href="https://github.com/solelychloe/status-worker">status-worker</a>.</p>
</div>

layouts/Page.astro:

View

```astro --- import Head from '@components/base/Head.astro'; import NavBar from '@components/base/NavBar.astro'; import '@fontsource/atkinson-hyperlegible/400.css'; import { slide } from 'astro:transitions'; import Footer from '@components/base/Footer.astro'; import { ResolveSuspended } from 'simple-stack-stream/components'; interface Props { description?: string; pageTitle: string; title?: string; created?: string; ogImage?: { src?: string; alt?: string; }; } const { description = 'Software engineer, sysadmin, community manager.', pageTitle, title = 'Chloe Arciniega', created, ogImage, } = Astro.props; ---

Here's my layout file. I'm calling <ResolveSuspended> here.

pages/index.astro:

View

```astro --- export const prerender = false; import Layout from '@layouts/Page.astro'; import Friends from '@components/home/buttons/Friends.astro'; import OtherButtons from '@components/home/buttons/Other.astro'; import Status from '@components/home/Status.astro'; import { Suspense } from 'simple-stack-stream/components'; ---

Loading status...

Hello!

I'm Chloe, a software engineer with a fascination for system administration and messing about with pieces of technology. Feel free to look around to get to know me better! ^w^

Friends

Other

```

And here's the page where I'm calling <Suspense>.

Result

All I'm getting is the fallback loading text: chrome_fdgZcASsr6

What's the expected result?

I expected the following to happen, step-by-step:

Show fallback loading text
Fetch status data in the background
Once the fetch process is complete, replace the loading text with the status data.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-lhjbyu?file=src%2Fpages%2Findex.astro

Participation

[ ] I am willing to submit a pull request for this issue.

SapphicMoe commented 10 months ago

I also noticed that users who have JS disabled still see the loading part, even with <noscript> present.

msedge_KvhNPcUXVH

  <section class="flex flex-col pt-5" aria-label="status">
    <Suspense>
      <Status />
      <div slot="fallback">
        <noscript>Text that people should see if JS is disabled</noscript>
        <p>Text that people should see if JS is enabled but content isn't loaded yet</p>
      </div>
    </Suspense>
  </section>

Is there a way to display *only* the noscript bit to users who have JS disabled? Thanks!

gitjoshu commented 10 months ago

Hello, this works on me.

I dont use the ResolveSuspended in the Layaout I use in the page when I have to use it, and where I do the request in other component, like this in your example:

https://stackblitz.com/edit/withastro-astro-3gnjna?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fcomponents%2FTodos.astro

bholmesdev commented 10 months ago

Thanks for sharing @solelychloe and @gitjoshu! I have a feeling this is an issue when calling ResolveSuspended from a layout per the above stackblitz. We'll need to investigate if this can be fixed, or if there's a more fundamental limitation.

gitjoshu commented 9 months ago

Thank you @bholmesdev that would be incredible. I really appreciate the work on this stack and I have one question, will simple-stack-stream be compatible with Viewtransitions? As far as I know, if I reload the page or I force navigation with data-astro-reload its works, but I don't know if there is currently a way to not force navigation for simple-stack-stream to function correctly or if you are going to work on it in the future. Thank you very much again.

bholmesdev commented 9 months ago

Alright, I've given this some investigation, and I don't have a fix yet.

Here's what I found:

Simple stream will work when Suspense and ResolveSuspended are used in the same Astro component
Once you use slots (say, for a base layout), the Suspense components will render after ResolveSuspended. I was hopeful rendering <slot /><ResolveSuspended /> would ensure all slot contents are streamed first, but it seems slot contents get deferred :(
I found a half-solution that renders slot contents separately to ensure ResolveSuspended comes at the end. However, this results in a double-render for all layout children. I have a feeling this is prohibitive for most people.

I'll work with the Astro core team to see what is possible. For now, I'd only use simple-stack-stream for the simplest of use cases!