Shows Loading Spinner Constantly

[daviddunnington]

Issue Description: When using the react-insta-stories component, if the first story in the stories array is an image or video, only the loading spinner is visible initially, and the actual image or video doesn't appear until navigating to the next story and then going back. This issue occurs even if the image or video is already loaded in the background. The problem can be reproduced by rearranging the order of the stories array, where the first item is an image or video.

https://github.com/mohitk05/react-insta-stories/assets/19631764/6ec21672-1b1a-4330-8766-f5dfe75a2e97

Steps to Reproduce:

1. Set up the react-insta-stories component with an array of stories.
2. Ensure the first story in the array is an image or video.
3. Load the component and observe that only the loading spinner is visible for the first story.
4. Navigate to the next story and then go back to the first story to see it properly.

Expected Behavior: The first story, whether it's an image or video, should be displayed immediately without only the loading spinner visible.

Actual Behavior: Only the loading spinner is visible for the first story, and the actual image or video is not displayed until navigating to the next story and going back.

Example Working Array:

const stories2 = [
    {
        content: Story2,
    },
    {
        url: "https://picsum.photos/1080/1920",
        seeMore: ({ close }) => (
            <div
                style={{
                    maxWidth: "100%",
                    height: "100%",
                    padding: 40,
                    background: "white",
                }}
            >
                <h2>Just checking the see more feature.</h2>
                <p style={{ textDecoration: "underline" }} onClick={close}>
                    Go on, close this popup.
                </p>
            </div>
        ),
    },
    {
        url:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
        type: "video",
    },

];

Example Not Working Array:

const stories2 = [

    {
        url: "https://picsum.photos/1080/1920",
        seeMore: ({ close }) => (
            <div
                style={{
                    maxWidth: "100%",
                    height: "100%",
                    padding: 40,
                    background: "white",
                }}
            >
                <h2>Just checking the see more feature.</h2>
                <p style={{ textDecoration: "underline" }} onClick={close}>
                    Go on, close this popup.
                </p>
            </div>
        ),
    },
    {
        url:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
        type: "video",
    },
   {
        content: Story2,
    },

];

Sample Code:

import React, { Suspense } from "react";
const StoriesLazy = React.lazy(() => import("react-insta-stories"));
const WithSeeMore = React.lazy(() =>
  import("react-insta-stories").then((module) => ({
    default: module.WithSeeMore,
  }))
);

function InstaStory() {
  return (
      <div className="stories">
        <Suspense>
          <StoriesLazy
            loop
            keyboardNavigation
            defaultInterval={8000}
            stories={stories2}
            onStoryEnd={(s, st) => console.log("story ended", s, st)}
            onAllStoriesEnd={(s, st) => console.log("all stories ended", s, st)}
            onStoryStart={(s, st) => console.log("story started", s, st)}
            onNext={() => console.log("next button pressed")}
            onPrevious={() => console.log("previous button pressed")}
            storyContainerStyles={{ borderRadius: 8, overflow: "hidden" }}
          />
        </Suspense>
      </div>
  );
}

const Story2 = ({ action, isPaused }) => {
  return (
    <div style={{ ...contentStyle, background: "Aquamarine", color: "#333" }}>
      <h1>You get the control of the story.</h1>
      <p>
        Render your custom JSX by passing just a{" "}
        <code style={{ fontStyle: "italic" }}>content</code> property inside
        your story object.
      </p>
      <p>
        You get a <code style={{ fontStyle: "italic" }}>action</code> prop as an
        input to your content function, that can be used to play or pause the
        story.
      </p>
      <h1>{isPaused ? "Paused" : "Playing"}</h1>
      <h4>v2 is out 🎉</h4>
      <p>React Native version coming soon.</p>
    </div>
  );
};

const stories2 = [
  {
    url: "https://picsum.photos/1080/1920",
    seeMore: ({ close }) => (
      <div
        style={{
          maxWidth: "100%",
          height: "100%",
          padding: 40,
          background: "white",
        }}
      >
        <h2>Just checking the see more feature.</h2>
        <p style={{ textDecoration: "underline" }} onClick={close}>
          Go on, close this popup.
        </p>
      </div>
    ),
  },
  {
    url:
      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
    type: "video",
  },
  {
    content: Story2,
  },
];

const contentStyle = {
  background: "#333",
  width: "100%",
  padding: 20,
  color: "white",
  height: "100%",
};

export default InstaStory;

Additional Information:

Version of react-insta-stories library: 2.6.1 Environment: (NEXT.js 13.4.7) Browses Tested: (Google Chrome, Safari)

[mohitk05]

Hey @daviddunnington , thank you for submitting a detailed issue. I used your sample code to create a codesandbox and I could not reproduce the issue. Can you check if there's something missing here? https://codesandbox.io/s/eager-thunder-wzksmk

[daviddunnington]

Hey @mohitk05

Thanks for such a fast reply, I have had a look at your code sandbox and it's working perfectly and set up exactly the same as I had set it up. The only difference is I'm using Next.js in my project I'm still new to next so could be something I have set up wrong.

I have created a sandbox with a Next.Js project and you can see it has the error. If you could have a look and see if you can notice anything that would be great in the meantime I will do some digging and make sure I'm using Next.js correctly.

https://codesandbox.io/p/sandbox/thirsty-mccarthy-tfhjwk

Thanks again for your help.

[daviddunnington]

@mohitk05 I was able to resolve the problem by not lazy loading the react-insta-stories component on initial page load as this is handled slightly different in Next.js

import dynamic from 'next/dynamic'
const StoriesLazy = dynamic(() => import('react-insta-stories'))

Please let me know if you have any other questions! I appreciate you taking the time to reply to this bug.

[mohitk05]

Ah, glad you were able to resolve it. Yes, I think the behaviour is a bit different on SSR, will check if I get some time.

[ummahusla]

@mohitk05 I was able to resolve the problem by not lazy loading the react-insta-stories component on initial page load as this is handled slightly different in Next.js

import dynamic from 'next/dynamic'
const StoriesLazy = dynamic(() => import('react-insta-stories'))

Please let me know if you have any other questions! I appreciate you taking the time to reply to this bug.

Issue still exists even if we use dynamic import.

Sandbox still doesn't load on the initial load.

https://codesandbox.io/p/devbox/thirsty-mccarthy-tfhjwk?file=%2Fcomponents%2Finsta.js%3A10%2C19

[ummahusla]

Okay, was able to fix it by spotting this code snippet in another issue:

import dynamic from 'next/dynamic';

const StoriesLazy = dynamic(() => import('react-insta-stories'), {
  ssr: false,
});