Roulette blinks the moment it stops spinning

[mateuszlason]

Hi there, I'm experiencing an issue where, the moment the roulette stops spinning, it blinks for a fraction of a second, likely returning to its initial state. Then it goes back to the finish state.

• I'm using Nextjs
• the roulette component is imported dynamically
• there are no additional re-renders after it stops spinning

         <Wheel
          mustStartSpinning={spin}
          data={data}
          startingOptionIndex={2}
          fontFamily="Lexend"
          fontSize={35}
          textDistance={65}
          fontWeight="500"
          prizeNumber={prizeIndex}
          backgroundColors={["#fff8eb", "#fff1d9", "#ffe3b3", "#ffdb65"]}
          textColors={["rgba(0,0,0, 0.6)", "rgba(0,0,0, 0.7)", "rgb(0,0,0)", "rgb(255,255,255)"]}
          radiusLineColor="#ffffff"
          innerBorderColor="#ffffff"
          outerBorderColor="#ffffff"
          innerRadius={26}
          spinDuration={0.5}
          onStopSpinning={handleFinishSpin}
          />

[timothygribbin]

I'm having the same issue, and have been running face first into a wall. Any luck?

[tomaslecaros]

same issue :(

[ryannovarypradana]

@timothygribbin, btw that's a bug. downgrade to 1.4.1. and delete spinDuration or set spinDuration to 1 or above. Read other issues, because someone has already discussed them

[tomaslecaros]

@timothygribbin, btw that's a bug. downgrade to 1.4.1. and delete spinDuration or set spinDuration to 1 or above. Read other issues, because someone has already discussed them

This is not solving the problem. I have version 1.4.1, and I deleted spinDuration but still have the same issue. I also tried setting spinDuration to 1 or higher

[rupam71]

I solve this problem. Here issue is, your page render effect <Wheel .../> component. I fix it by isolate <Wheel component in another component. Here is my solution

  const Wheel = dynamic(() => import('react-custom-roulette').then((mod) => mod.Wheel), { ssr: false });

  const SpinnerModal = () => {
      const dispatch = useAppDispatch();
      const { spinnerOpne } = useAppSelector((state) => state.uiSettings);
      const available_spins = useAppSelector((state) => state.customer.customer?.available_spins) || 0;

      const handleClose = () => dispatch(setSpinnerOpen(false));

      const [rewardList, setrewardList] = useState<SpinnerReward[] | []>([]);
      const [mutate, { data: spinData, error }] = useSpin();
      const [hanldeMeCall] = useMe();

      const { data } = useGetSpinnerRewardList();
      const [spinLoading, setSpinLoading] = useState(false);

      useEffect(() => {
          if (data?.data.length) {
              const newDataWithOption = data.data.map((ele) => ({
                  ...ele,
                  option: ele.name,
                  style: {
                      backgroundColor: '#DF3428',
                  },
              }));
              setrewardList(newDataWithOption);
          }
      }, [data]);

      const [prize, setPrize] = useState(-1);

      const handleSpinClick = () => {
          if (available_spins > 0) {
              setSpinLoading(true);
              mutate();
          }
      };

      useEffect(() => {
          if (spinData?.data.id) {
              const foundIndex = rewardList.findIndex((ele) => ele.name === spinData?.data.name);
              setPrize(foundIndex);
              hanldeMeCall();
          }

          if (error) {
              setSpinLoading(false);
          }
      }, [spinData, error]);

      const handleCallback = useCallback(() => {
          setSpinLoading(false);
          setPrize(-1)
        }, []);

      return (
          <Modal open={spinnerOpne} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
              <Box sx={loginSignUpPopupstyle}>
                  <Box sx={{ position: 'relative', height: '50px', width: '100%' }} display={{ xs: 'block', sm: 'none' }}>
                      <Box sx={{ position: 'absolute', top: '16px', right: '16px' }}>
                          <Stack
                              width={36}
                              height={36}
                              borderRadius={3}
                              justifyContent={'center'}
                              alignItems={'center'}
                              sx={{ background: '#474949', cursor: 'pointer' }}
                          >
                              <CloseIcon fontSize="small" sx={{ color: 'white' }} onClick={handleClose} />
                          </Stack>
                      </Box>
                  </Box>

                  <Stack alignItems="center">
                      <Typography fontSize={'24px'} fontFamily={'inherit'} fontWeight={800} sx={{ color: 'white' }}>
                          Lucky Spin
                      </Typography>
                      <Typography mt={1} mb={3} fontSize={'14px'} fontFamily={'inherit'} fontWeight={600} sx={{ color: 'rgb(179, 190, 193)' }}>
                          Available Spin : <span>{available_spins}</span>
                      </Typography>

                      {rewardList?.length > 0 && (
                          <Box p={-1} position={'relative'}>
                              <SpinComponent 
                                  rewardList={rewardList} 
                                  prize={prize} 
                                  handleCallback={handleCallback} 
                              />

                              <Stack
                                  onClick={handleSpinClick}
                                  justifyContent={'center'}
                                  alignItems={'center'}
                                  position={'absolute'}
                                  width={'20%'}
                                  height={'20%'}
                                  border={'8px solid'}
                                  borderColor={goldenColor}
                                  bgcolor={'black'}
                                  top={'49.6%'}
                                  left={'49.6%'}
                                  zIndex={6}
                                  borderRadius={'50%'}
                                  sx={{
                                      borderWidth: { xs: '4px', sm: '6px', md: '8px' },
                                      transform: 'translate(-50%, -50%)',
                                      cursor: spinLoading ? 'none' : 'pointer',
                                  }}
                              >
                                  <Typography
                                      fontSize={{ xs: '14px', sm: '16px', md: '18px' }}
                                      textAlign={'center'}
                                      fontFamily={'inherit'}
                                      fontWeight={800}
                                      sx={{ color: spinLoading ? 'gray' : goldenColor }}
                                  >
                                      Spin
                                  </Typography>
                              </Stack>
                          </Box>
                      )}
                  </Stack>
              </Box>
          </Modal>
      );
  };

  export default SpinnerModal;

  const SpinComponent = memo(({ rewardList, prize, handleCallback }: any) => {
      const [mustSpin, setMustSpin] = useState(false);
      const [prizeNumber, setPrizeNumber] = useState(0);

      useEffect(() => {
          if(prize > -1) {
              setMustSpin(true)
              setPrizeNumber(prize)
          }
      }, [prize]);

      if (rewardList?.length > 0)
          return (
              <Wheel
                  mustStartSpinning={mustSpin}
                  prizeNumber={prizeNumber}
                  onStopSpinning={() => {
                      setMustSpin(false);
                      handleCallback()
                  }}
                  data={rewardList || []}
                  textColors={['#ffffff']}
                  disableInitialAnimation={true}
                  outerBorderColor={goldenColor}
                  radiusLineColor={goldenColor}
                  outerBorderWidth={8}
                  radiusLineWidth={4}
                  innerRadius={12}
                  fontFamily="AvertaStd-Regular"
                  fontSize={24}
                  pointerProps={{
                      style: {
                          color: 'blue',
                      },
                  }}
              />
          );
  });

[LChris94]

I have the same problem, I tried @rupam71 's solution but it still does the flickering on mobile devices.