refactor LazyLoad component

TODO.md

@@ -7,7 +7,7 @@ golive:
 - [x] Pre-commit hookspo
 - [x] Schema changes
 - [-] Error handling in the services
-- [ ] Add more comments to the code
+- [x] Add more comments to the code
 - [ ] Demo deployment environment
 - [ ] Developer docs
 - [ ] Screenshots

web/components/Loading.jinja → web/components/LazyLoad.jinja

@@ -1,8 +1,9 @@
 {#def
   hx_get: str,
   hx_trigger: str,
-  hx_swap: str = "outerHTML"
+  hx_swap: str = "outerHTML",
 #}
+<!-- lazy load -->
 <div hx-get="{{ hx_get }}" hx-trigger="{{ hx_trigger }}" hx-swap="{{ hx_swap }}">
-  <SvgLoader />
+  <SvgLoading />
 </div>

web/components/user/UserList.jinja

@@ -35,6 +35,7 @@
 
 <section
   id="user_list"
+  class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
   hx-get="{{ get_users_list(page.page, page.page_size, page.order_by, page.ascending) }}"
   hx-trigger="refresh from:body"
 >

web/templates/pages/dashboard.html

@@ -9,11 +9,11 @@ <h1 class="pl-2 pt-2 text-lg font-semibold leading-6 text-gray-900 dark:text-gra
     <!-- row of stats -->
     <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
       <!-- Total Users -->
-      <Loading hx_get="/dashboard/users/count" hx_trigger="load" />
+      <LazyLoad hx_get="/dashboard/users/count" hx_trigger="load" />
       <!-- Active Users -->
-      <Loading hx_get="/dashboard/users/active_count" hx_trigger="load" />
+      <LazyLoad hx_get="/dashboard/users/active_count" hx_trigger="load" />
       <!-- Admin Users -->
-      <Loading hx_get="/dashboard/users/admin_count" hx_trigger="load" />
+      <LazyLoad hx_get="/dashboard/users/admin_count" hx_trigger="load" />
     </dl>
   </div>
 </Admin>

web/templates/pages/users.html

@@ -17,18 +17,12 @@ <h1 class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">Use
         </a>
       </div>
     </div>
-    <!-- list -->
+    <!-- list users -->
     <div class="mt-8 flow-root px-4 py-3 sm:px-6">
+      <!-- overflow for row highlight -->
       <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <!-- lazily load the list of users, replace div content with response returned from hx-get -->
-        <div
-          id="get-user-list"
-          class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
-          hx-get="/users/list"
-          hx-trigger="load"
-        >
-          <SvgLoader />
-        </div>
+        <LazyLoad hx_get="/users/list" hx_trigger="load" />
       </div>
     </div>
     <!-- list -->