Spin the i icon when loading data or performing a query

mrheinen commented 3 weeks ago

PR Type

Enhancement

Description

Implemented a loading indicator for the DataSearchBar component, which spins the info icon when data is being fetched or queries are running.
Added an 'isLoading' state to multiple list components (AppsList, ContentList, DownloadsList, EventsList, HoneypotList, QueryList, RequestsList, RulesList, TagList).
Updated the loading state management in the respective load methods of each list component.
Passed the 'isLoading' prop from list components to the DataSearchBar component to control the spinning icon.
Added bold styling to the spinning icon for better visibility during loading states.
Improved user experience by providing visual feedback during data fetching and query operations across multiple components.

Changes walkthrough 📝

Relevant files

Enhancement

10 files

DataSearchBar.vue `Add loading indicator to search bar` ui/src/components/DataSearchBar.vue Added 'isloading' prop to component Implemented dynamic icon class with spinning effect when loading Added bold styling for the spinning icon	+11/-2
AppsList.vue `Implement loading state for AppsList` ui/src/components/container/AppsList.vue Added 'isLoading' state Implemented loading state management in loadApps method Passed 'isLoading' prop to DataSearchBar component	+5/-2
ContentList.vue `Add loading state to ContentList` ui/src/components/container/ContentList.vue Added 'isLoading' state Implemented loading state management in loadContents method Passed 'isLoading' prop to DataSearchBar component	+5/-1
DownloadsList.vue `Implement loading indicator for DownloadsList` ui/src/components/container/DownloadsList.vue Added 'isLoading' state Implemented loading state management in loadDownloads method Passed 'isLoading' prop to DataSearchBar component	+6/-1
EventsList.vue `Add loading state to EventsList` ui/src/components/container/EventsList.vue Added 'isLoading' state Implemented loading state management in loadEvents method Passed 'isLoading' prop to DataSearchBar component	+5/-1
HoneypotList.vue `Implement loading indicator for HoneypotList` ui/src/components/container/HoneypotList.vue Added 'isLoading' state Implemented loading state management in loadHoneypots method Passed 'isLoading' prop to DataSearchBar component	+5/-1
QueryList.vue `Add loading state to QueryList` ui/src/components/container/QueryList.vue Added 'isLoading' state Implemented loading state management in loadQueries method Passed 'isLoading' prop to DataSearchBar component	+5/-1
RequestsList.vue `Implement loading indicator for RequestsList` ui/src/components/container/RequestsList.vue Added 'isLoading' state Implemented loading state management in loadRequests method Passed 'isLoading' prop to DataSearchBar component	+9/-1
RulesList.vue `Add loading state to RulesList` ui/src/components/container/RulesList.vue - Passed 'isLoading' prop to DataSearchBar component	+1/-1
TagList.vue `Add loading state to TagList` ui/src/components/container/TagList.vue Added 'isLoading' state Implemented loading state management in loadTags method Passed 'isLoading' prop to DataSearchBar component	+5/-1

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

codiumai-pr-agent-pro[bot] commented 3 weeks ago

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review

Performance Concern
The computed property 'iconClass' is recalculated on every component update, which might be inefficient. Consider using a method instead if the property doesn't need to be reactive. Code Duplication
The 'this.isLoading = false;' statement is repeated multiple times in the loadRequests method. Consider refactoring to reduce duplication and improve maintainability. Unnecessary Newlines
There are unnecessary newlines added before setting 'this.isLoading = true;' in the loadDownloads method. This inconsistency might affect code readability.

github-actions[bot] commented 3 weeks ago

Failed to generate code suggestions for PR

codiumai-pr-agent-pro[bot] commented 3 weeks ago

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Best practice	Use consistent naming conventions for props ___ Consider using a computed property for the `isloading` prop to ensure consistent naming conventions. Vue.js typically uses camelCase for prop names in JavaScript and kebab-case in templates. Change `:isloading` to `:isLoading` in the template, and update the prop definition accordingly. [ui/src/components/DataSearchBar.vue [29]](https://github.com/mrheinen/lophiid/pull/55/files#diff-83b55e908ff801220b32cb5fe49137bb4ea454eb94950a725282dc2a611d449eR29-R29) ```diff -props: ["options", "query", "modelname", "isloading"], +props: ["options", "query", "modelname", "isLoading"], ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 8 Why: Consistent naming conventions improve code readability and maintainability. Changing 'isloading' to 'isLoading' aligns with Vue.js best practices for prop naming.	8
Enhancement	Use object syntax for defining props with their types ___ To improve code readability and maintainability, consider using object syntax for defining props with their types. This approach provides better documentation and type checking. [ui/src/components/DataSearchBar.vue [29]](https://github.com/mrheinen/lophiid/pull/55/files#diff-83b55e908ff801220b32cb5fe49137bb4ea454eb94950a725282dc2a611d449eR29-R29) ```diff -props: ["options", "query", "modelname", "isloading"], +props: { + options: Array, + query: String, + modelname: String, + isLoading: Boolean +}, ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Using object syntax for props improves code documentation and enables better type checking, enhancing code quality and maintainability.	7
Performance	Use a computed property with getter and setter for two-way binding ___ To improve performance and avoid unnecessary re-renders, consider using a computed property with a getter and setter for `localQuery` instead of using `v-model` directly on the data property. This approach allows for more control over when updates occur. [ui/src/components/DataSearchBar.vue [11]](https://github.com/mrheinen/lophiid/pull/55/files#diff-83b55e908ff801220b32cb5fe49137bb4ea454eb94950a725282dc2a611d449eR11-R11) ```diff - + ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 6 Why: While this can improve performance in some cases, the current implementation may be sufficient for most scenarios. The benefit might be minimal unless dealing with frequent updates.	6
Maintainability	Extract complex string concatenation into a separate method ___ To improve code clarity and maintainability, consider extracting the complex string concatenation in the `iconClass` computed property into a separate method. This approach makes the code more readable and easier to test. [ui/src/components/DataSearchBar.vue [53-55]](https://github.com/mrheinen/lophiid/pull/55/files#diff-83b55e908ff801220b32cb5fe49137bb4ea454eb94950a725282dc2a611d449eR53-R55) ```diff iconClass() { - return "pi pi-info-circle search-info-icon pointer" + (this.isloading ? " pi-spin bold" : "") + return this.getIconClass(); }, +methods: { + getIconClass() { + const baseClass = "pi pi-info-circle search-info-icon pointer"; + return this.isLoading ? `${baseClass} pi-spin bold` : baseClass; + } +} ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 5 Why: Extracting the logic into a separate method can improve readability, but the current implementation is not overly complex. The benefit is moderate and mainly affects code organization.	5

💡 Need additional feedback ? start a PR chat

mrheinen / lophiid