perf: misc performance improvements

frontend/src/components/DiscussionReplies.vue

@@ -71,6 +71,7 @@
 		</div>
 
 		<TextEditor
+			v-if="renderEditor"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
@@ -94,7 +95,7 @@ import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted, computed } from 'vue'
+import { ref, inject, onMounted } from 'vue'
 import { createToast } from '../utils'
 
 const showTopics = defineModel('showTopics')
@@ -102,6 +103,8 @@ const newReply = ref('')
 const socket = inject('$socket')
 const user = inject('$user')
 const allUsers = inject('$allUsers')
+const mentionUsers = ref([])
+const renderEditor = ref(false)
 
 const props = defineProps({
 	topic: {
@@ -124,6 +127,7 @@ onMounted(() => {
 	socket.on('delete_message', (data) => {
 		replies.reload()
 	})
+	fetchMentionUsers()
 })
 
 const replies = createResource({
@@ -150,15 +154,26 @@ const newReplyResource = createResource({
 	},
 })
 
-const mentionUsers = computed(() => {
-	let users = Object.values(allUsers.data).map((user) => {
-		return {
-			value: user.name,
-			label: user.full_name,
-		}
-	})
-	return users
-})
+const fetchMentionUsers = () => {
+	if (user.data?.is_student) {
+		renderEditor.value = true
+	} else {
+		allUsers.reload(
+			{},
+			{
+				onSuccess(data) {
+					mentionUsers.value = Object.values(data).map((user) => {
+						return {
+							value: user.name,
+							label: user.full_name,
+						}
+					})
+					renderEditor.value = true
+				},
+			}
+		)
+	}
+}
 
 const postReply = () => {
 	newReplyResource.submit(

frontend/src/main.js

@@ -1,5 +1,4 @@
 import './index.css'
-
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
@@ -8,15 +7,8 @@ import dayjs from '@/utils/dayjs'
 import { createDialog } from '@/utils/dialogs'
 import translationPlugin from './translation'
 import { usersStore } from './stores/user'
-import { sessionStore } from './stores/session'
 import { initSocket } from './socket'
-import {
-	FrappeUI,
-	setConfig,
-	frappeRequest,
-	resourcesPlugin,
-	pageMetaPlugin,
-} from 'frappe-ui'
+import { FrappeUI, setConfig, frappeRequest, pageMetaPlugin } from 'frappe-ui'
 
 let pinia = createPinia()
 let app = createApp(App)
@@ -32,8 +24,6 @@ app.provide('$socket', initSocket())
 app.mount('#app')
 
 const { userResource, allUsers } = usersStore()
-let { isLoggedIn } = sessionStore()
-
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
 app.config.globalProperties.$user = userResource

frontend/src/pages/Notifications.vue

@@ -25,7 +25,7 @@
 			class="flex items-center py-2 justify-between"
 		>
 			<div class="flex items-center">
-				<UserAvatar :user="allUsers.data[log.from_user]" class="mr-2" />
+				<Avatar :image="log.user_image" :label="log.full_name" class="mr-2" />
 				<div class="notification" v-html="log.subject"></div>
 			</div>
 			<div class="flex items-center space-x-2">
@@ -57,6 +57,7 @@
 </template>
 <script setup>
 import {
+	Avatar,
 	createListResource,
 	createResource,
 	Breadcrumbs,
@@ -66,14 +67,12 @@ import {
 	Tooltip,
 } from 'frappe-ui'
 import { computed, inject, ref, onMounted } from 'vue'
-import UserAvatar from '@/components/UserAvatar.vue'
 import { useRouter } from 'vue-router'
 import { X } from 'lucide-vue-next'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 const socket = inject('$socket')
-const allUsers = inject('$allUsers')
 const activeTab = ref('Unread')
 const router = useRouter()
 
@@ -93,24 +92,22 @@ const notifications = computed(() => {
 
 const unReadNotifications = createListResource({
 	doctype: 'Notification Log',
-	fields: ['subject', 'from_user', 'link', 'read', 'name'],
+	url: 'lms.lms.api.get_notifications',
 	filters: {
 		for_user: user.data?.name,
 		read: 0,
 	},
-	orderBy: 'creation desc',
 	auto: true,
 	cache: 'Unread Notifications',
 })
 
 const readNotifications = createListResource({
 	doctype: 'Notification Log',
-	fields: ['subject', 'from_user', 'link', 'read', 'name'],
+	url: 'lms.lms.api.get_notifications',
 	filters: {
 		for_user: user.data?.name,
 		read: 1,
 	},
-	orderBy: 'creation desc',
 	auto: true,
 	cache: 'Read Notifications',
 })

frontend/src/router.js

@@ -217,21 +217,13 @@ let router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-	const { userResource, allUsers } = usersStore()
+	const { userResource } = usersStore()
 	let { isLoggedIn } = sessionStore()
 
 	try {
 		if (isLoggedIn) {
 			await userResource.promise
 		}
-		if (
-			isLoggedIn &&
-			(to.name == 'Lesson' ||
-				to.name == 'Batch' ||
-				to.name == 'Notifications')
-		) {
-			await allUsers.promise
-		}
 	} catch (error) {
 		isLoggedIn = false
 	}

frontend/src/stores/session.js

@@ -5,7 +5,7 @@ import router from '@/router'
 import { ref, computed } from 'vue'
 
 export const sessionStore = defineStore('lms-session', () => {
-	let { userResource, allUsers } = usersStore()
+	let { userResource } = usersStore()
 
 	function sessionUser() {
 		let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
@@ -17,9 +17,6 @@ export const sessionStore = defineStore('lms-session', () => {
 	}
 
 	let user = ref(sessionUser())
-	if (user.value) {
-		allUsers.reload()
-	}
 	const isLoggedIn = computed(() => !!user.value)
 
 	const login = createResource({