imagesloaded | :camera: JavaScript is all like "You images done yet or what?" | Computer Vision library

It seems Tailwind cannot take a value from config file on the fly (within square brackets in a JIT mode). I see the option to register custom width class within configuration file like

You can either move your scripts node (renamed script) in the head node of your nuxt.config.js file (mostly for external resources, every key/value in each script's object is an attribute) or use Nuxt's plugins as per https://nuxtjs.org/docs/configuration-glossary/configuration-plugins and https://nuxtjs.org/docs/directory-structure/plugins/.

Well, imagesLoaded works with images, while your code loads twitter cards.

A workaround for this would be to use the twitter API

There are a few things to improve in the code, one that will possibly (but maybe not) fix the exception.

The exception appears to be thrown by fontFaceObserver whose docs indicate that the default loading timeout is 3 seconds (3000ms). Perhaps try a longer timeout, as those docs suggest, with the optional second parameter to load.

Meanwhile, code improvements that are a must for the code to work at all...

In your case when dispatching actions in the created() hook the actions just start, but you do not know when they finish, the rest of the code keeps executing. In other words, by the time this.isotope() is called, your projects are not in the store yet.

Since you're using Nuxt, probably the best approach would be to use the asyncData hook. Using that, on first load (refreshing the page, or entering the url manually) the code inside asyncData will be executed on the server, so you're sure that the component will have the API data before rendering. It's also a faster approach, as you're leveraging the built-in nuxt SSR.

Another option would be to use async/await. You can take a look here how that would look. You might end up with something like this:

On load more, it looks like you are not making use of imagesLoaded correctly.

Let's take a look at your initialization code:

Use

I've made this using LazySizes plugin, no imagesLoaded though, but it works as it should now

HTML

Becasue images only has value after you call dispatch(getImages());

const [list, setList] = useState([...images.slice(0, 5)]) will declare the initial value for list and not update when images update.

if you want update list when images update, you can use useEffect: