Transition issues with dynamic slide rendering (without breaking other apis)

[remy90]

Hi there, I'm having issues with rendering dynamically fetched content. The client knows the total number of questions but not the next question until an answer has been selected. The following works with no transition issues:

const scrollNext = useCallback(async () => {
    if (emblaApi && !isFetching) {
      const nextIndex = selectedIndex + 1

      if (nextIndex === totalQuestions) return

        emblaApi.scrollNext()
        setIsFetching(true)
        const nextQuestion = await fetchQuestions(surveyType, journeyId, authString)
        if (nextQuestion?.questionDetails) {
          setQuestions([...questions, nextQuestion.questionDetails])
        }
        setSelectedIndex(selectedIndex + 1)
        setNextBtnEnabled(selectedIndex < totalQuestions)
        setPrevBtnEnabled(selectedIndex > 0)
        setIsFetching(false)
      }
  }, [...])

However it breaks canScrollNext() and probably a lot of other things. I've used arrows and dots as a starting template because we have forward and back buttons. I made good progress with a refactor back towards arrows and dots and used emblaApi.on('settle', () => {...}) to wait for the transition to complete before setting state but it takes too long and we're introducing a skeleton for the transition rather than for network speeds.

I've looked at your suggestion towards infinite scrolling but it seems like there's a hefty overhead, considering the above works.

Do you have any suggestions other than using the infinite scroll as a template in this use case? My main additional requirement to the arrows and dots example is:

const nextQuestion = await fetchQuestions(surveyType, journeyId, authString)
        if (nextQuestion?.questionDetails) {
          setQuestions([...questions, nextQuestion.questionDetails]) // where setQuestions is useState<QuestionDetails[]>([questionSets])
        }

[davidjerleke]

Hi,

If I understand you correctly, you want to dynamically add slides after fetching them. The latest release introduces the watchSlides option where you can intercept the Embla auto re-init behavior when slides are added/removed, and add your own logic before it re-initializes.

Have you checked that out?

Best,
David

[davidjerleke]

Thanks @remy90. I think I need one more thing. A specification. How is it supposed to work?

• Should the user be able to scroll to the next slide before the content of that slide has finished loading?
• Or should the carousel next button be disabled until the next slide content has finished loading?

[remy90]

Great question. On current implementations, the fetch happens on the next slide click. There could be future iterations where a selected answer triggers the load before the user clicks next but I think the next button shouldn't be disabled, so:

The next button should always be enabled when we know there's another question. Ideally, a loading screen is only displayed because of large data fetches or slow network requests, so the first option seems best IMO

I can create another sandbox with the code at the top to show how it works without issues relating to content or scrolling if that's helpful?

[remy90]

Any further thoughts David? I've also encountered some issues with using on settle that appears to run havoc on my unit tests so a work around would be much appreciated!

[davidjerleke]

Hi @remy90,

Assuming this is the requirement:

The next button should always be enabled when we know there's another question. Ideally, a loading screen is only displayed because of large data fetches or slow network requests, so the first option seems best IMO

I would do it like this:

1. If I understand you correctly, you know the total number of slides in advance. So create empty slides for all questions when you declare your useState() for the slides:

interface QuestionType {
  hasLoaded: boolean
  isLoading: boolean
  questionDetails: {
    title: string
    // ...additional data on this model
  }
}

function emptyQuestionsFromNumber(questionCount: number): QuestionType[] {
  const questions = [...Array(questionCount).keys()]
  return questions.map(() => {
    hasLoaded: false,
    isLoading: false,
    questionDetails: {
      title: ''
      // ...additional data on this model
    }
  })
}

const EmblaCarousel: React.FC<PropType> = (props) => {
  const [slides, setSlides] = useState(emptyQuestionsFromNumber(10))

  // ...

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          {slides.map((slide, index) => (
            <div className="embla__slide" key={index}>
              {/* Question content... */}
            </div>
          ))}
        </div>
      </div>

      <PrevButton onClick={scrollPrev} enabled={prevBtnEnabled} />
      <NextButton onClick={scrollNext} enabled={nextBtnEnabled} />
    </div>
  )
}

2. And then, I would listen to the select event because it will trigger as soon as the user either clicks the next or previous button, or when the user drags the carousel and a selected snap change occur:

const loadQuestion = useCallback(async (index: number) => {
  // ... load question here
  const questionResponseData = await loadSlide(index)

  // ...and when loading has finished update the slide state
  setSlides(currentSlides => {
    const newSlides = [...currentSlides]
    newSlides[index] = questionResponseData
    return newSlides
  })
}, [])

useEffect(() => {
    if (!emblaApi) return

    // Load first question
    const selectedIndex = emblaApi.selectedScrollSnap()
    loadQuestion(selectedIndex)

    // Load the rest when the selected snap changes
    emblaApi.on('select', () => {
      const selectedIndex = emblaApi.selectedScrollSnap()
      const { isLoading, hasLoaded } = slides[selectedIndex]
      const shouldLoadQuestion = !isLoading && !hasLoaded

      if (shouldLoadQuestion) loadQuestion(selectedIndex)
    })
}, [emblaApi, slides, loadQuestion])

Based on the information I have so far, I don't think it has to be more complicated than that. I haven't tested the code above and there might be some things you need to tweak to get it working. But you should get the idea.

Best,
David

[davidjerleke]

@remy90 have you had the chance to read my comment?

[remy90]

Hi David, thanks for your response. I removed 'on settle', and it simply worked as expected with smooth transitions. Not sure what I changed, it was just one of those things 🤷‍♂️

Comparing your implementation with mine, I think it's pretty much the same, without on settle. I can now remove my local useState for setSelectedIndex too:

  useEffect(() => {
    setEmbla({
      emblaApi: emblaCarouselApi,
      emblaRef: emblaCarouselRef,
    })
    setTotalQuestions(totalQuestionsNo)
    setQuestions([questionSets])
  }, [emblaCarouselApi, emblaCarouselRef, setEmbla])

  useEffect(() => {
    if (emblaApi?.reInit) {
      emblaApi?.reInit()
    }
  }, [emblaApi])

  const onSelect = useCallback(async () => {
    if (!emblaApi) return

    setPrevBtnEnabled(emblaApi.canScrollPrev())
    setNextBtnEnabled(emblaApi.canScrollNext())
  }, [emblaApi])

  useEffect(() => {
    if (!emblaApi) return

    onSelect()
    emblaApi.on('select', onSelect)
    emblaApi.on('reInit', onSelect)
  }, [emblaApi, onSelect])

  return  <div className={classes.embla} ref={emblaRef}>
      <div className={classes.emblaContainer}>
          {Array.from(Array(totalQuestions).keys())?.map(questionIndex => (
          <div className={classes.emblaSlide} key={questionIndex}>
            <div className={classes.pageBody}>
              {questions[questionIndex] ? (
                <QuestionCard
                  question={questions[questionIndex]}
                  onAnswerUpdate={handleAnswerUpdate}
                />
              ) : ( <Loading /> )
              }
              <div className={classes.bodyFooter}>
                <div className={classes.bodyFooterContainer}>
                    <Button  label='back' onClick={handlePrev} />
                    <Button label='save' onClick={handleSubmit} />
                    <Button label='skip' onClick={handleNext} />
                </div>
              </div>
            </div>
          </div>
        ))}

I was also thinking of a refactor at some stage to use vanilla, as the whole carousel can be moved to a react server component, with the exception of the navigation buttons. Sounds like there's two potential sandbox demo's (unknown data and server components) that could be created, if you think either of them are of value, I may pick up one of them when I have a little more bandwidth!