Tes 64 connect backend product card data

[WitchDevelops]

Connected to backend using axios.

• created a httpclient
• created products and classifiers service
• added (animated) loading and (not animated but with a reload button) error components
• added pictures to match the backend response - not all phones exist in the color versions we're getting from the backend!

[netlify[bot]]

✅ Deploy Preview for telia-web-shop ready!

Name	Link
🔨 Latest commit	ce867bee8a9940515f747866c3f9d7c64aea2199
🔍 Latest deploy log	https://app.netlify.com/sites/telia-web-shop/deploys/66f900f014f648000830c9f5
😎 Deploy Preview	https://deploy-preview-25--telia-web-shop.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 55 Accessibility: 100 Best Practices: 75 SEO: 92 PWA: - View the detailed breakdown and full score reports

---

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

[KozerT]

Overall, this pull request introduces some solid enhancement with the backend integration and product data fetching. The addition of the Error component and CSS loader also improve the user experience 🚀

Here are a few key suggestions:

Optimize Loader: While the CSS loader is visually appealing, we should keep an eye on its performance, especially on lower-powered devices. Would be better to use Next.js features like Suspense for loading states.

Maybe we can simplify the API interaction by using Axios directly in ProductGrid, removing the need for httpService.ts and productService.ts. This can potentially improve performance and reduce complexity.

Also, I notice that some of the images aren't loading correctly. To improve the user experience, we could add a default image for ProductCard in case the actual image fails to load during the presentation :)

Before presenting, we should also address the ESLint disabled comments in ColorDots, PlaceOrderForm, and PlaceOrderForm test.