perf: improve drop first load speed

[hassnian]

PR Type

• Bugfix
• Feature
• Refactoring

Context

• fetching the drop a little before inside the setup

• made some components lazy

• drop gallery item is loaded once the divider is seen

• Ref All Drops are very slow #10307

Needs QA check

• @kodadot/qa-guild please review

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Screenshot 📸

• My fix has changed something on UI;

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	f1ca0eb
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/665ee3dcf2bdb5000836e33d
😎 Deploy Preview	https://deploy-preview-10379--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Jarsen136]

You have applied the similar logic of lazy load in two places. How about making a common lazy wrapper component?

<div>
  <div ref="target"></div>
  <template v-if="targetIsVisible">
      <slot />
   </template>
<div>

const target = ref<HTMLHtmlElement>()
const targetIsVisible = useOnceIsVisible(target)

drop gallery item is loaded once the divider is seen

In case of one day we removed the divider line on the drop page.

[hassnian]

You have applied the similar logic of lazy load in two places. How about making a common lazy wrapper component?

done

[codeclimate]

Code Climate has analyzed commit f1ca0eb and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[preschian]

quite really difficult to see the differences. but, lets go