FlowFuse · n-lark · Jul 31, 2026
diff --git a/frontend/src/components/SkeletonBlock.vue b/frontend/src/components/SkeletonBlock.vue
@@ -0,0 +1,29 @@
+<template>
+    <div
+        class="ff-skeleton-block animate-pulse"
+        :style="{ width, height, borderRadius: radius }"
+    />
+</template>
+
+<script setup>
+defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '20px'
+    },
+    radius: {
+        type: String,
+        default: '4px'
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ff-skeleton-block {
+    background-color: var(--ff-color-bg-emphasis);
+}
+</style>
diff --git a/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue b/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue
@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
-import applicationApi from '../../../api/application.js'
 import deviceApi from '../../../api/devices.js'
 import Alerts from '../../../services/alerts.js'
 import MultiStepForm from '../MultiStepForm.vue'
@@ -31,6 +30,7 @@ import TeamStep from './steps/TeamStep.vue'
 
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 const TEAM_STEP_SLUG = 'team'
 const APPLICATION_SLUG = 'application'
@@ -128,6 +128,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['createApplication']),
         updateForm (payload, stepKey) {
             this.currentStepKey = stepKey
             this.form = { ...this.form, ...payload }
@@ -139,7 +140,7 @@ export default {
 
             return new Promise((resolve) => {
                 if (this.hasToCreateAnApplication) {
-                    return applicationApi.createApplication({
+                    return this.createApplication({
                         ...this.form[APPLICATION_SLUG].input,
                         teamId: this.team.id
                     })

diff --git a/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue b/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
-import applicationApi from '../../../api/application.js'
 import flowBlueprintsApi from '../../../api/flowBlueprints.js'
 import instanceApi from '../../../api/instances.js'
 import Alerts from '../../../services/alerts.js'
@@ -32,6 +31,7 @@ import FlowsStep from './steps/flows-step/index.vue'
 
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 const TEAM_STEP_SLUG = 'team'
 const APPLICATION_SLUG = 'application'
@@ -178,6 +178,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['createApplication']),
         updateForm (payload, stepKey) {
             this.currentStepKey = stepKey
             this.form = { ...this.form, ...payload }
@@ -189,7 +190,7 @@ export default {
 
             return new Promise((resolve) => {
                 if (this.hasToCreateAnApplication) {
-                    return applicationApi.createApplication({
+                    return this.createApplication({
                         ...this.form[APPLICATION_SLUG].input,
                         teamId: this.team.id
                     })

diff --git a/frontend/src/mixins/Application.js b/frontend/src/mixins/Application.js
@@ -4,6 +4,7 @@ import ApplicationApi from '../api/application.js'
 import alerts from '../services/alerts.js'
 
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     data () {
@@ -36,6 +37,7 @@ export default {
     },
     methods: {
         ...mapActions(useContextStore, { setContextualApplication: 'setApplication' }),
+        ...mapActions(useDataFarmApplicationsStore, { deleteApplicationEntity: 'deleteApplication' }),
         async updateApplication () {
             const applicationId = this.$route.params.id
 
@@ -87,7 +89,7 @@ export default {
             this.loading.deleting = true
 
             try {
-                await ApplicationApi.deleteApplication(this.application.id, this.team.id)
+                await this.deleteApplicationEntity(this.application.id, this.team.id)
                 await useContextStore().refreshTeam()
                 this.$router.push({ name: 'Applications' })
                 alerts.emit('Application successfully deleted.', 'confirmation')

diff --git a/frontend/src/pages/application/Settings/General.vue b/frontend/src/pages/application/Settings/General.vue
@@ -57,6 +57,7 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 
 import ApplicationAPI from '../../../api/application.js'
@@ -66,6 +67,8 @@ import FormRow from '../../../components/FormRow.vue'
 import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
+
 export default defineComponent({
     name: 'ApplicationSettingsGeneral',
     components: {
@@ -114,6 +117,7 @@ export default defineComponent({
         this.loadInstances(this.application.id)
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['updateApplication']),
         editName () {
             this.editing = true
             this.$refs.appName.focus()
@@ -125,10 +129,9 @@ export default defineComponent({
             this.input.projectDescription = this.application.description
         },
         saveApplication () {
-            ApplicationAPI.updateApplication(
+            this.updateApplication(
                 this.application.id,
-                this.input.projectName,
-                this.input.projectDescription
+                { name: this.input.projectName, description: this.input.projectDescription }
             )
                 .then(() => {
                     this.$emit('application-updated')

diff --git a/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue b/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
@@ -0,0 +1,77 @@
+<template>
+    <ul class="ff-applications-list" data-el="applications-list-skeleton">
+        <li v-for="n in count" :key="n" class="ff-application-skeleton">
+            <div class="ff-application-skeleton--header">
+                <SkeletonBlock width="200px" height="20px" />
+                <div class="ff-application-skeleton--badges">
+                    <SkeletonBlock v-for="b in 5" :key="b" width="34px" height="22px" radius="6px" />
+                </div>
+            </div>
+            <div class="ff-application-skeleton--body">
+                <div v-for="section in 2" :key="section" class="ff-application-skeleton--section">
+                    <SkeletonBlock width="120px" height="14px" />
+                    <div class="ff-application-skeleton--tiles">
+                        <SkeletonBlock v-for="tile in 3" :key="tile" height="68px" radius="6px" />
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
+</template>
+
+<script setup>
+import SkeletonBlock from '@/components/SkeletonBlock.vue'
+
+defineProps({
+    count: {
+        type: Number,
+        default: 4
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ff-application-skeleton {
+    border: 1px solid var(--ff-color-border-strong);
+    border-radius: 6px;
+    margin-bottom: 12px;
+    background-color: var(--ff-color-bg-app);
+
+    &--header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        padding: 12px;
+    }
+
+    &--badges {
+        display: flex;
+        gap: 6px;
+    }
+
+    &--body {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    &--section {
+        flex: 1;
+        min-width: 240px;
+        padding: 12px;
+        padding-top: 6px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    &--tiles {
+        display: flex;
+        gap: 8px;
+
+        :deep(.ff-skeleton-block) {
+            flex: 1;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/team/Applications/index.vue b/frontend/src/pages/team/Applications/index.vue
@@ -33,9 +33,9 @@
             </ff-page-header>
         </template>
         <div class="space-y-6">
-            <ff-loading v-if="loading" message="Loading Applications..." />
+            <ApplicationsListSkeleton v-if="isLoadingTeamApplications" />
 
-            <template v-else-if="!loading && applications.size > 0">
+            <template v-else-if="teamApplications.length > 0">
                 <ff-text-input
                     v-model="filterTerm"
                     class="ff-data-table--search"
@@ -51,8 +51,8 @@
                             :key="application.id"
                             data-el="application-item"
                             :application="application"
-                            @instance-deleted="fetchData(false)"
-                            @device-deleted="fetchData(false)"
+                            @instance-deleted="refreshApplications"
+                            @device-deleted="refreshApplications"
                         />
                     </transition-group>
                 </ul>
@@ -103,21 +103,23 @@
 <script>
 import { MagnifyingGlassIcon, PlusSmallIcon } from '@heroicons/vue/24/outline'
 
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
-import teamApi from '../../../api/team.js'
 import EmptyState from '../../../components/EmptyState.vue'
 import usePermissions from '../../../composables/Permissions.js'
 
 import ApplicationListItem from './components/Application.vue'
+import ApplicationsListSkeleton from './components/ApplicationsListSkeleton.vue'
 
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     name: 'TeamApplications',
     components: {
         MagnifyingGlassIcon,
         ApplicationListItem,
+        ApplicationsListSkeleton,
         EmptyState,
         PlusSmallIcon
     },
@@ -128,8 +130,6 @@ export default {
     },
     data () {
         return {
-            loading: false,
-            applications: new Map(),
             columns: [
                 { label: 'Name', class: ['grow'], key: 'name', sortable: true }
             ],
@@ -139,52 +139,37 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team']),
-        applicationsList () {
-            return Array.from(this.applications.values())
-        },
+        ...mapState(useDataFarmApplicationsStore, ['teamApplications', 'isLoadingTeamApplications']),
         filteredApplications () {
             if (this.filterTerm.length) {
-                return this.applicationsList
+                return this.teamApplications
                     .filter(app => {
                         return [
                             app?.name?.toLowerCase().includes(this.filterTerm.toLowerCase()),
                             app?.id?.toLowerCase().includes(this.filterTerm.toLowerCase())
                         ].includes(true)
                     })
-            } return this.applicationsList
+            } return this.teamApplications
         }
     },
     watch: {
-        team: 'fetchData'
+        team: 'loadApplications'
     },
     async mounted () {
-        await this.fetchData()
+        await this.loadApplications()
 
         this.setSearchQuery()
     },
     methods: {
-        async fetchData (withLoading = true) {
-            this.loading = withLoading
-            if (this.team.id) {
-                const applicationsMap = new Map()
-
-                teamApi.getTeamApplications(this.team.id,
-                    {
-                        includeApplicationSummary: true,
-                        includeInstances: false,
-                        includeApplicationDevices: false
-                    }
-                ).then((response) => {
-                    const applications = response.applications
-                    applications.forEach((applicationData) => {
-                        applicationsMap.set(applicationData.id, applicationData)
-                    })
-                    this.applications = applicationsMap
-                })
-                    .catch(e => e)
-                    .finally(() => {
-                        this.loading = false
-                    })
+        ...mapActions(useDataFarmApplicationsStore, ['ensureTeamApplicationsLoaded']),
+        loadApplications () {
+            if (this.team?.id) {
+                return this.ensureTeamApplicationsLoaded(this.team.id)
+            }
+        },
+        refreshApplications () {
+            if (this.team?.id) {
+                return this.ensureTeamApplicationsLoaded(this.team.id, { force: true })
             }
         },
         setSearchQuery () {

diff --git a/frontend/src/stores/account-auth.js b/frontend/src/stores/account-auth.js
@@ -11,6 +11,7 @@ import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useCookieConsentStore } from '@/stores/cookie-consent'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
@@ -232,6 +233,7 @@ export const useAccountAuthStore = defineStore('account-auth', {
             useUxStore().$reset()
             useContextStore().$reset()
             useCookieConsentStore().reset()
+            useDataFarmApplicationsStore().reset()
             useProductTablesStore().$reset()
             useProductBrokersStore().$reset()
             useProductAssistantStore().$reset()

diff --git a/frontend/src/stores/account.js b/frontend/src/stores/account.js
@@ -7,6 +7,7 @@ import getAppOrchestrator from '@/services/app.orchestrator'
 import product from '@/services/product.js'
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 function ensureTeamChannelConnected (team) {
@@ -132,6 +133,7 @@ export const useAccountStore = defineStore('account', {
         },
         clearOtherStores () {
             useProductTablesStore().clearState()
+            useDataFarmApplicationsStore().reset()
         }
     }
 })