Issue with Progress Bar component

[teganduong]

Hi team! I think there might be an issue with the Progress Bar component in Paste. I used the indeterminate Progress Bar but it does not look like what is displayed in the Paste documentation. Here's what it looks like:

Screen.Recording.2023-11-29.at.3.07.18.PM.mov

And here's the code I used:

<Box marginTop="space100" marginX="space50" data-testid="loading-preview">
      <ProgressBarLabel htmlFor="preview-progress-bar">Loading results...</ProgressBarLabel>
      <ProgressBar id="preview-progress-bar" isIndeterminate={true} aria-describedby="preview-help-text" />
      <HelpText id="preview-help-text">This may take a few minutes</HelpText>
      <Box marginTop="space80" textAlign="center">
        <TrackingButton variant="secondary" onClick={onCancelPreview} data-testid="cancel-preview-button">
          Cancel preview
        </TrackingButton>
      </Box>
</Box>

For context, I am using the Progress Bar component within the segment app project.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Based on the code you've provided, it seems like you're using the Progress Bar component correctly. The isIndeterminate prop is set to true, which should display an indeterminate Progress Bar.

Here's the relevant code from the Paste documentation for reference:

import {ProgressBar, ProgressBarLabel} from '@twilio-paste/core/progress-bar';
import {Box} from '@twilio-paste/core/box';
import {HelpText} from '@twilio-paste/core/help-text';
import {useUID} from '@twilio-paste/core/uid-library';

const AlertDialogExample = () => {
  const progressBarId = useUID();
  const helpTextId = useUID();

  return (
    <Box>
      <ProgressBarLabel htmlFor={progressBarId}>Downloading more RAM</ProgressBarLabel>
      <ProgressBar id={progressBarId} aria-describedby={helpTextId} isIndeterminate />
      <HelpText id={helpTextId}>Increasing your RAM helps your computer run faster.</HelpText>
    </Box>
  );
};

If the Progress Bar is not displaying as expected, it might be an issue with the Paste design system itself or with how your project is set up. I would recommend checking if your project is wrapped by the Theme Provider as Paste components need to be used within it. If the issue persists, it might be worth raising this in the Twilio Labs Paste discussions for further assistance.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Request for comment (RFC): Progress Bar (updated: 10/05/2023, similarity score: 86%)
• Progress bar (updated: 07/06/2022, similarity score: 86%)
• Guidance on using progress bar vs. skeleton loader (updated: 10/27/2023, similarity score: 86%)

[SiTaggart]

Hi @teganduong

Can you provide a reproduction in code sandbox for us, please?

Do you know what version of Paste Core you're using too?

Thanks

[serifluous]

Hey @teganduong ! We're going to mark this discussion as answered due to inactivity.

If you still need help, feel free to reply to start up the discussion again.