1478: Add preloader

[rhaicode]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Do a quick check before the merge.

PR type

• Bugfix
• Feature
• Refactoring

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried respect high code quality standards
• I've didn't break any original functionality
• I've posted screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything works
• I found edge cases

What's new?

• PR closes Change preloader on beta #1478
• New loader screen

Had issue bounty label ?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed something on UI, a screenshot for others, is best to understand changes.

http://somup.com/crl2fL0HUU

[netlify]

✔️ Deploy Preview for koda-nuxt ready!

🔨 Explore the source changes: e09a58f

🔍 Inspect the deploy log: https://app.netlify.com/sites/koda-nuxt/deploys/61bdbefac6045900084ab510

😎 Browse the preview: https://deploy-preview-1520--koda-nuxt.netlify.app

[vikiival]

Please use linter, looks like yours made a ton of changes into nuxt.config.js

[yangwao]

Please use linter, looks like yours made a ton of changes into nuxt.config.js

yeah @rhaicode let's use linter and we can merge, it's def nicer than basic one! :)

[roiLeo]

Hey! IMO, you should change the .html to a .vue component as seen in Nuxt doc

Some of the css can be removed and replaced by Bulma helpers class

[rhaicode]

Hello @vikiival , since we have ssr:false, it is not applicable. Therefore, this is the Nuxt doc (https://nuxtjs.org/examples/loading/customize-loading-indicator) that I have followed where in we have to use loadingIndicator.

More about loadingIndicator : https://nuxtjs.org/docs/configuration-glossary/configuration-loading-indicator/ and head over to 'Custom indicators'. It will refer you to Nuxt's built-in source code that are using .html instead

[yangwao]

hey let's add this one "folding square" from spinkit https://tobiasahlin.com/spinkit/
and we are good to go! :)

Screen.Recording.2021-12-16.at.16.18.47.mov

[rhaicode]

Hi @yangwao , what do you think now of the new preloader?

[yangwao]

Perfect, I’ve sent the payout https://kusama.subscan.io/extrinsic/0xdf0621c718394966b2bf3df5dcf74b988c62e9aa01e13a1ea3014e1ad9b92889

Let’s grab another issue and get rewarded!
https://github.com/kodadot/nft-gallery/issues/