Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BootstrapAdminUi] Add loader #240

Merged
merged 1 commit into from
Feb 18, 2025
Merged

Conversation

loic425
Copy link
Member

@loic425 loic425 commented Feb 18, 2025

We'll document this on a cookbook to create an admin dashboard with statistics.

Copy link
Member

@diimpp diimpp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's approved since it's a direct copy of functionality from main package, but I've few points about it:

1. Loader should been made into component, right now each usage specifies image each time.
  <div class="sylius-loader">
      <img src="{{ asset('build/admin/images/loader.svg', 'admin') }}" alt="Loading"/>
  </div>

https://github.com/search?q=repo%3ASylius%2FSylius+sylius-loader&type=code

2. SVG image hardcodes size, color and css animation inside file, which should happen outside via css or some icon component
--- <svg width="24" height="24" stroke="#23B99A" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner{transform-origin:center;animation:circle 2s linear infinite}.spinner circle{stroke-linecap:round;animation:cir 1.5s ease-in-out infinite}@keyframes circle{100%{transform:rotate(360deg)}}@keyframes cir{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>
+++ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g class="spinner"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>

<g class="spinner"> probably should be extracted as well.

Here is example how css animation can look via css.

image

3. We should use tabler icon if possible

image

@loic425 loic425 merged commit 4cc6302 into Sylius:main Feb 18, 2025
6 checks passed
@loic425 loic425 deleted the feature/loading branch February 18, 2025 12:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants