added refresh button to the other listing pages

ui/src/components/admins/PageAdmins.svelte

@@ -3,6 +3,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import { admin as loggedAdmin } from "@/stores/admin";
     import Searchbar from "@/components/base/Searchbar.svelte";
+    import RefreshButton from "@/components/base/RefreshButton.svelte";
     import SortHeader from "@/components/base/SortHeader.svelte";
     import IdLabel from "@/components/base/IdLabel.svelte";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
@@ -31,6 +32,7 @@
 
     export function loadAdmins() {
         isLoading = true;
+
         admins = []; // reset
 
         return ApiClient.Admins.getFullList(100, {
@@ -65,6 +67,8 @@
             <div class="breadcrumb-item">Admins</div>
         </nav>
 
+        <RefreshButton on:refresh={() => loadAdmins()} />
+
         <div class="flex-fill" />
 
         <button type="button" class="btn btn-expanded" on:click={() => adminUpsertPanel?.show()}>

ui/src/components/base/RefreshButton.svelte

@@ -0,0 +1,52 @@
+<script>
+    import { createEventDispatcher, onMount } from "svelte";
+    import tooltip from "@/actions/tooltip";
+
+    const dispatch = createEventDispatcher();
+
+    let tooltipData = { text: "Refresh", position: "right" };
+    export { tooltipData as tooltip };
+
+    let refreshTimeoutId = null;
+
+    function refresh() {
+        dispatch("refresh");
+
+        // clear tooltip
+        const oldTooltipData = tooltipData;
+        tooltipData = null;
+
+        clearTimeout(refreshTimeoutId);
+        refreshTimeoutId = setTimeout(() => {
+            clearTimeout(refreshTimeoutId);
+            refreshTimeoutId = null;
+            tooltipData = oldTooltipData;
+        }, 230);
+    }
+
+    onMount(() => {
+        return () => clearTimeout(refreshTimeoutId);
+    });
+</script>
+
+<button
+    type="button"
+    class="btn btn-secondary btn-circle"
+    class:refreshing={refreshTimeoutId}
+    use:tooltip={tooltipData}
+    on:click={refresh}
+>
+    <i class="ri-refresh-line" />
+</button>
+
+<style>
+    @keyframes refresh {
+        100% {
+            transform: rotate(180deg);
+        }
+    }
+
+    .btn.refreshing i {
+        animation: refresh 200ms linear infinite;
+    }
+</style>

ui/src/components/logs/PageLogs.svelte

@@ -1,8 +1,8 @@
 <script>
     import CommonHelper from "@/utils/CommonHelper";
-    import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
     import Searchbar from "@/components/base/Searchbar.svelte";
+    import RefreshButton from "@/components/base/RefreshButton.svelte";
     import LogsList from "@/components/logs/LogsList.svelte";
     import LogsChart from "@/components/logs/LogsChart.svelte";
     import LogViewPanel from "@/components/logs/LogViewPanel.svelte";
@@ -34,14 +34,7 @@
                 <div class="breadcrumb-item">Request logs</div>
             </nav>
 
-            <button
-                type="button"
-                class="btn btn-circle btn-secondary"
-                use:tooltip={{ text: "Refresh", position: "right" }}
-                on:click={refresh}
-            >
-                <i class="ri-refresh-line" />
-            </button>
+            <RefreshButton on:refresh={() => refresh()} />
 
             <div class="flex-fill" />
 

ui/src/components/records/PageRecords.svelte

@@ -8,6 +8,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import Searchbar from "@/components/base/Searchbar.svelte";
+    import RefreshButton from "@/components/base/RefreshButton.svelte";
     import CollectionsSidebar from "@/components/collections/CollectionsSidebar.svelte";
     import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
     import CollectionDocsPanel from "@/components/collections/docs/CollectionDocsPanel.svelte";
@@ -85,15 +86,8 @@
             >
                 <i class="ri-settings-4-line" />
             </button>
-            
-            <button
-                type="button"
-                class="btn btn-secondary btn-circle"
-                use:tooltip={{ text: "Refresh collection", position: "right" }}
-                on:click={() => recordsList?.load()}
-            >
-                <i class="ri-refresh-line" />
-            </button>
+
+            <RefreshButton on:refresh={() => recordsList?.load()} />
 
             <div class="btns-group">
                 <button

ui/src/components/records/RecordsList.svelte

@@ -43,15 +43,15 @@
 
         isLoading = true;
 
+        if (page <= 1) {
+            clearList();
+        }
+
         return ApiClient.Records.getList(collection.id, page, 50, {
             sort: sort,
             filter: filter,
         })
             .then((result) => {
-                if (page <= 1) {
-                    clearList();
-                }
-
                 isLoading = false;
                 records = records.concat(result.items);
                 currentPage = result.page;

ui/src/components/users/PageUsers.svelte

@@ -4,6 +4,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import Searchbar from "@/components/base/Searchbar.svelte";
+    import RefreshButton from "@/components/base/RefreshButton.svelte";
     import SortHeader from "@/components/base/SortHeader.svelte";
     import IdLabel from "@/components/base/IdLabel.svelte";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
@@ -50,15 +51,15 @@
     export async function loadUsers(page = 1) {
         isLoadingUsers = true;
 
+        if (page <= 1) {
+            clearList();
+        }
+
         return ApiClient.Users.getList(page, 50, {
             sort: sort || "-created",
             filter: filter,
         })
             .then((result) => {
-                if (page <= 1) {
-                    clearList();
-                }
-
                 isLoadingUsers = false;
                 users = users.concat(result.items);
                 currentPage = result.page;
@@ -122,6 +123,8 @@
                 <i class="ri-settings-4-line" />
             </button>
 
+            <RefreshButton on:refresh={() => loadUsers()} />
+
             <div class="flex-fill" />
 
             <button type="button" class="btn btn-expanded" on:click={() => userUpsertPanel?.show()}>