Implement Dynamic Loading Skeleton for Storefront Dynamic Data

[John-zaviago]

Issue Title: Implement Dynamic Loading Skeleton for Storefront Dynamic Data

Issue Description: To enhance the user experience on the storefront, we need to implement dynamic loading skeletons for all sections containing dynamic data. This includes but is not limited to the catalogue page, product detail page, cart slide-in, checkout, account page, and any other pages that fetch data from the database.

Enhancements:

1. Dynamic Loading Skeletons:

   • Introduce dynamic loading skeletons for various sections, covering images, product names, and other dynamic data.
   • Ensure that the size and layout of the skeleton match the actual content to prevent layout shifts.

2. Dynamic Release of Skeletons:

   • Implement a mechanism to dynamically release the skeletons when the corresponding data is loaded.
   • Avoid using a static timeout configuration for the skeletons, making the release dynamic based on data retrieval.

Implementation Steps:

1. Identify Sections for Skeletons:

   • Determine the sections across the storefront that require dynamic loading skeletons.

2. Create Dynamic Skeletons:

   • Develop dynamic loading skeletons for each identified section, considering the layout and size of the actual content.

3. Integrate Dynamic Release Mechanism:

   • Implement logic to dynamically release skeletons as soon as the corresponding data is loaded.
   • Avoid setting a fixed timeout for skeleton removal.

Expected Outcome:

• Users will experience a smoother and more visually appealing storefront with dynamic loading skeletons that match the content's layout and size.
• Dynamic release ensures that skeletons are removed promptly upon data retrieval, preventing unnecessary delays.

Additional Information:

• Consider providing feedback or loading indicators for users during data retrieval to supplement the skeleton loading.
• Test the implementation across various scenarios to ensure responsiveness.

Labels:

• Storefront
• User Experience
• Dynamic Loading

---

Action Plan:

1. Assign the issue to a team member specializing in frontend development and user experience.
2. Identify sections across the storefront that require dynamic loading skeletons.
3. Develop dynamic loading skeletons for each identified section, ensuring they match the layout and size of actual content.
4. Implement logic to dynamically release skeletons as soon as the corresponding data is loaded.
5. Avoid setting a fixed timeout for skeleton removal to ensure dynamic responsiveness.
6. Test the implementation across various scenarios to ensure reliability.
7. Consider providing additional feedback or loading indicators during data retrieval.
8. Update documentation to inform users about the enhanced storefront experience.
9. Communicate updates to the team and stakeholders.
10. Document the implementation details for future reference.

---

How to Test:

• Navigate through various storefront sections and observe the dynamic loading skeletons.
• Confirm that skeletons match the layout and size of actual content.
• Ensure that skeletons are promptly removed upon data retrieval without unnecessary delays.

[John-zaviago]

@AnatholyB1 can you suggest a good skeleton package for this issue?

[AnatholyB1]

Shadcn has a really good skeleton with function callback, don't need to install the whole package just skeleton files is enough.

[John-zaviago]

Shadcn has a really good skeleton with function callback, don't need to install the whole package just skeleton files is enough.

please make sure that @MarkSuttirak understand this.

[primSirirnit]

Update checklist in storefront

Design (Mark - CSS)

• [x] My Order
• [x] Order Detail
• [x] My Account
• [x] My Address

Fix Function

• [ ] Logo on New Tab (Add fill in on backend)

Header

• [x] Menu Stacked with Silde bar and Search box
• [x] CSS on the Dropdown menu
• [x] CSS Dropdown menu on Mobile

Shop page

• [x] Loading button

Single page

• [x] Image isn't full
• [x] Loading Button
• [x] Recommended Products backend data

My Order

• [ ] Order status

[John-zaviago]

@primSirirnit @chomchuen please follow up all tasks and close it with some report of comment kub