The cube sides are rendered by CSS, which renders quickly and smoothly on all browsers. But, the nature of the problem is that the cube side background-image properties depend on a collection of around 75 logo images; the URLs of which are provided by a REST API. I have to request this, then wait indefinitely, then parse the URLs, and then only afterward can I begin to download and paint the cube sides with these images. On a slow internet connection you would initially see a bare-naked cube for several seconds, and then afterwards you could see each new logo downloading on the cube side, which looked terrible.
What I describe here as the “slow-loading logo problem” really gets to the heart of the challenge of creating sophisticated animations in React. Slow-loading logos are a big problem that requires a multi-prong solution. Note that the long list of logos is a design requirement: I want to show site visitors a huge list of technologies. Furthermore, the logos need to be high quality, and, they need transparent backgrounds. Following is how I solved this for the logo cube.